1

I have problem with vertically centering the element in the navigation bar on my page. This is my code:

body {
  margin:0;
}
header {
  background-color: #f2f2f2;
  height: 50px;
}
div {
  display: flex;
  justify-content: space-between;
  margin: auto 30px;
}
<header>
  <div>
    <a href="#"><img class="header-logo" alt="logo"></a>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact</a>
    </nav>
  </div>
</header>

My question is why the div element is not centered in the header, since in the CSS code the top and bottom margins of the div element are set to auto, and that's what I do to center vertically.

Youssouf Oumar
  • 29,373
  • 11
  • 46
  • 65
G1nd3kk
  • 17
  • 3
  • `margin: auto` to the `Y`-axis only works inside Flexbox and CSS-Grid. But you apply it to the flex container in your case. Properly better though to use `align-items` or `justify-content` depending on your `flex-direction` to center the content vertically. – tacoshy Jul 11 '22 at 18:41

3 Answers3

3

As you can read on mdn, you can't center a normal element horizontally with margin: auto:

auto: The browser selects a suitable margin to use. For example, in certain cases this value can be used to center an element.

To center something horizontally in modern browsers, you can use display: flex; justify-content: center.

Or you can simply add display:grid on your header, the container, and margin:auto works for horizontal alignment as well, cause then the div inside will become a grid-item, which is more flexible than a normal div. Like so:

body {
  margin:0;
}
header {
  display:grid;
  background-color: #f2f2f2;
  height: 50px;
}
div {
  display: flex;
  justify-content: space-between;
  margin: auto 30px;
}
<header>
  <div>
    <a href="#"><img class="header-logo" alt="logo"></a>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact</a>
    </nav>
  </div>
</header>
Youssouf Oumar
  • 29,373
  • 11
  • 46
  • 65
  • 1
    or use Flexbox. with Flexbox he could get rid of the unnecessary `div` and use the header to align the items along the cross and side axis at the same instance. – tacoshy Jul 11 '22 at 18:45
1

margin: auto to the Y-axis only works inside Flexbox and CSS-Grid. But you apply it to the flex container in your case. Properly better though to use align-items or justify-content depending on your flex-direction to center the content vertically.

In your case it would be way easier to simply remove the div as wrapper and apply the flexbox to the header itself and then vertically center the element with align-items: center:

body {
  margin:0;
}
header {
  background-color: #f2f2f2;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
}
<header>
    <a href="#"><img class="header-logo" alt="logo"></a>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact</a>
    </nav>
</header>
tacoshy
  • 10,642
  • 5
  • 17
  • 34
0

body {
  margin:0;
}
header {
  background-color: #f2f2f2;
  height: 50px;
}
div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto 30px;
  height: 100%;
}
<header>
  <div>
    <a href="#"><img class="header-logo" alt="logo"></a>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact</a>
    </nav>
  </div>
</header>
Zorion85
  • 132
  • 5