1

I want my first element to be on the left and my second element to be in the exact center of the screen (while being horizontally aligned). Logo/text left, navigation bar in the middle.

I cant seem to get the following result with the code below:

|red|-------|green|------------|

I want the center of the Green square in the middle of the screen. Which would normally happen if I used text-align: center; on a single element if its not inline-blocked.

HTML:

<body>
    <div class="red-color"></div>
    <div class="green-color"></div>
  </body>

CSS:

.red-color {
        background-color: red;
        padding: 100px;
        display: inline-block;
      }

      .green-color {
        background-color: green;
        padding: 100px;
        display: inline-block;
      }

Would really appreciate any advice, I have been stuck on this for a few days now already. I've tried to wrap them both up in a div and text-align: center; them. but then I cant seem to push the red square back to the left.

And while I can do it by playing with the margins and eyeballing the center, this does not feel like the optimal solution.

Fibox
  • 9
  • 2

2 Answers2

1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .main{
        width: 100%;
        height: 100px;
        display: flex;
        flex-direction: row;
        
    }
    .red-color {
        background-color: red;
        width: 30%;
      }

      .green-color {
        background-color: green;
        width: 30%;
      }

</style>
<body>
    <div class="main">
        <div class="red-color">logo/text</div>
        <div class="green-color">navbar</div>
    </div>
    
</body>
</html>

u can use flexbox to adjust elements accordingly. I created a main-div then gave height and width and then its has green and red div's , I applied flex property to main and gave width to each div so , by adjusting the width u can change the position of logo or navbar.

U-33
  • 139
  • 1
  • 11
  • hmm I have a short follow up question: my navbar has 5 options: Home - About - Gallery - FAQ - Contact I want Gallery to be in the exact middle of the screen (because its the middle of the navbar). Is there no option to say: The middle of the navbar should go in the middle of the screen? Now every time I change the font-size / font / font weight/etc. I have to restructure everything. – Fibox Jun 30 '22 at 18:03
  • you can give width to all navbar elements like 20% for 5 elemnts and the gallery will always in the middle but u do have to rewrite code for small screen as 20% of the width is very small compare to big screens – U-33 Jul 01 '22 at 04:13
0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">`enter code here`
    <title>Document</title>
</head>
<style>
    .main{
        width: 100%;
        height: 100px;
        display: flex;
        flex-direction: row;
        
    }
    .red-color {
        background-color: red;
        width: 30%;
        margin-right: 5%;
      }

      .green-color {
        background-color: green;
        width: 30%;
       margin-left: 10%;
      }

</style>
<body>
    <div class="main">
        <div class="red-color">logo/text</div>
        <div class="green-color">navbar</div>
    </div>
    
</body>
</html>
ABHISHEK SINGH
  • 1
  • Yes this is what I mean, but now I need the middle of the green nav bar in the middle of the screen. (with your code the left side of the nav bar is in the middle) Because I have 5 options in the navbar horizontally centered, A B C D E and I want option C to always be in the middle of the screen. – Fibox Jun 30 '22 at 18:09
  • Hi, you mean you want the "text" inside the Green box to be at the center or the whole green bar to be at the center of the screen? pls explain – ABHISHEK SINGH Jul 02 '22 at 17:12
  • Hmm, Let me rephrase it a bit, If the green box is 100px, I want it to be in the exact middle, meaning that it has 50px to the left of the center and 50px to the right of the center. – Fibox Jul 03 '22 at 07:35