Centering vertical in header navbar

Question

I created a navbar in my header and aligned it with another element so that they were centered. However, after adding an image to the header, one of the elements is no longer centered:

#header nav {
  display: inline;
}
#header {
  background: #5D6D63;
  padding: 28px 0 26px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
}
#header nav ul {
  float: right;
  margin: 0px;
  margin-right: 100px;
}
li {
  list-style-type: none;
  float: left;
  margin-left: 46px;
}
a[href^="#"] {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: -1px;
  text-decoration: none
}
a[href="#top"] {
  margin-left: 100px;
}

<header id="header">
  <a href="#top">Name</a>
  <a href="https://github.com/">
    <img src="assets/imgs/GitHub-Mark-Light-64px.png" alt="GitHub" height="24" width="24">
  </a>
  <nav id="navbar">
    <ul>
      <li><a href="#">Link 1</a>
      </li>
      <li><a href="#">Link 2</a>
      </li>
      <li><a href="#">Link 3</a>
      </li>
    </ul>
  </nav>
</header>

The issue is the vertical alignment of the Name anchor tag. It should be centered with the the github image and the navbar. If I remove the github image, it works fine and it is aligned. Why is the github image causing the Name anchor tag to be pushed down a few pixels?

Here are pictures to show it misaligned (with image) and aligned (without image)

You'd think there would be an appropriate dupe out there for vertically-aligning elements like this...but man, so hard to find in the sea of marginally related questions. XP — Serlite, May 19 '16 at 13:54

j08691 · Answer 1 · 2016-05-19T13:44:23.083

2

Because the default vertical alignment for inline elements is baseline and you want middle. So add a rule like:

img {
  vertical-align:middle;
}

#header nav{
    display:inline;
}
#header {
    background: #5D6D63;
    padding: 28px 0 26px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;

}
#header nav ul {
    float: right;
    margin: 0px;
    margin-right: 100px;
}
li {
    list-style-type: none;
    float: left;
    margin-left: 46px; 
}
a[href^="#"]{
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -1px;
    text-decoration: none
}

a[href="#top"] {
    margin-left:100px;
}
img {
  vertical-align:middle;
}

 <header id="header"> 
        <a href="#top">Name</a>
        <a href="https://github.com/">
            <img src="http://www.uoyabause.org/images/logos/GitHub-Mark-Light-64px.png" alt="GitHub" height="24" width="24">
        </a>
        <nav id="navbar">
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>       
          </ul>
        </nav>
    </header>

edited May 19 '16 at 13:44

answered May 19 '16 at 13:43

j08691

204,283
31
260
272

Seriously? Answering this question? Even your answer doesn't have the right one. – Praveen Kumar Purushothaman May 19 '16 at 13:44
2

@PraveenKumar - I don't see a problem with helping the user. And what's wrong with the answer? – j08691 May 19 '16 at 13:45
I would comment the answer and close as too broad... Even that helps... – Praveen Kumar Purushothaman May 19 '16 at 13:46
@PraveenKumar Why is it too broad? Seems pretty obvious what the OP's issue is. – j08691 May 19 '16 at 13:47
That's the exact reason why it is too broad. It is like "How should I center text?" - Toooooo broad. – Praveen Kumar Purushothaman May 19 '16 at 13:48
@j08691 Another stackoverflow question I read that was similar stated that vertical-align doesn't work as intended without a table which is why I removed it. Is there a reason why some people seem to not suggest using it without a table?: http://stackoverflow.com/questions/16629561/css-vertical-align-middle-not-working – Eric May 19 '16 at 13:49
2

@PraveenKumar You answered this [one](http://stackoverflow.com/questions/37278498/css-border-top-is-not-working/37278582#37278582), if you're implying, that's an easy one, and should be a comment instead. It's not too broad. People make it too broad by creating a lot of layouts. In this case doesn't need that, simple `vertical-align` is the solution – dippas May 19 '16 at 13:50
@EricS Oftentimes the tabular approach is because they're trying to center block-level elements vertically. However, vertically aligning inline/inline-block-level elements relative to each other may be done with simply `vertical-align`. – Serlite May 19 '16 at 13:52
1

@Serlite Even this approach doesn't seem to actually align the image with the rest of the content. It's not centered. It's better than before so I'll use it. – Eric May 19 '16 at 13:57
1

@EricS In fact, you need to apply `vertical-align:middle` to both the image, and the anchor tag next to the image. Was writing an answer regarding that, wasn't sure if I should post it though. (Let me know if you need to see that.) – Serlite May 19 '16 at 13:57
@Serlite That was what I was missing. Thanks – Eric May 19 '16 at 14:05
@EricS Super - I'll add the answer in case anyone else runs into this issue, since it can be a bit of a gotcha (and the info I want to add is a bit too substantial to edit in...). – Serlite May 19 '16 at 14:06

score 1 · Accepted Answer · answered May 19 '16 at 14:07

As mentioned by j08691 (and others), the property you're looking for is vertical-align:middle.

One caveat, however: you have to remember that both the image and the anchor tag next to it by default have vertical-align:baseline - meaning, if you only vertically center one of them, its baseline will become vertically aligned to the center of the sibling element, rather than its middle. (Depending on which element you apply this to, this could arguable worsen your alignment problem.)

Here are the modified/added style blocks you'll be needing:

a[href="#top"] {
  margin-left: 100px;
  vertical-align: middle;
}
#header img {
  vertical-align: middle;
}

#header nav {
  display: inline;
}
#header {
  background: #5D6D63;
  padding: 28px 0 26px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
}
#header nav ul {
  float: right;
  margin: 0px;
  margin-right: 100px;
}
li {
  list-style-type: none;
  float: left;
  margin-left: 46px;
}
a[href^="#"] {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: -1px;
  text-decoration: none
}
a[href="#top"] {
  margin-left: 100px;
  vertical-align: middle;
}
#header img {
  vertical-align: middle;
}

<header id="header">
  <a href="#top">Name</a>
  <a href="https://github.com/">
    <img src="assets/imgs/GitHub-Mark-Light-64px.png" alt="GitHub" height="24" width="24">
  </a>
  <nav id="navbar">
    <ul>
      <li><a href="#">Link 1</a>
      </li>
      <li><a href="#">Link 2</a>
      </li>
      <li><a href="#">Link 3</a>
      </li>
    </ul>
  </nav>
</header>

Hope this helps! Let me know if you have any questions.

This is what I was missing. Before posting this question I tried adding the vertical-align: middle to the img and noticed it still wasn't centered. Didn't realize I needed to add it to the text as well. Works perfectly now! — Eric, May 20 '16 at 18:41

score 0 · Answer 3 · answered May 19 '16 at 13:42

0

Make Image Verticla alignment: Add Css Like this:

a img{
   vertical-align:middle
}

answered May 19 '16 at 13:42

Mukesh Ram

6,248
4
19
37

Francisco Romero · Answer 4 · 2016-05-19T14:00:51.213

You can display your #header as flex and use align-content: center;.

#header nav{
    display:inline;
}
#header {
    display: flex; /* NEW: Makes the container as flexbox */
    align-content: center; /* NEW: Center the items inside the container vertically */
    background: #5D6D63;
    padding: 28px 0 26px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;

}
#header nav ul {
    float: right;
    margin: 0px;
    margin-right: 100px;
}
li {
    list-style-type: none;
    float: left;
    margin-left: 46px; 
}
a[href^="#"]{
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -1px;
    text-decoration: none
}

a[href="#top"] {
    margin-left:100px;
}

<header id="header"> 
        <a href="#top">Name</a>
        <a href="https://github.com/">
            <img src="http://www.uoyabause.org/images/logos/GitHub-Mark-Light-64px.png" alt="GitHub" height="24" width="24">
        </a>
        <nav id="navbar">
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>       
          </ul>
        </nav>
    </header>

Add jQuery, Bootstrap CSS, and also a rocket launcher code as well. :P Man, why do you need to complicate things, when you can achieve it using `vertical-align`? — Praveen Kumar Purushothaman, May 19 '16 at 13:49
@PraveenKumar Well... I am not a friend of using libraries for this kind of approachs. I just put another solution with new CSS different from `j08691`'s one. — Francisco Romero, May 19 '16 at 13:51
@PraveenKumar Yes, I knew. I just was following your play :) And yeah, I think it is always a good way to have different solutions and let the OP choose the best one. Of course, in this case, that can be fixed with a single line, it could be a bit redundant. — Francisco Romero, May 19 '16 at 13:58

Centering vertical in header navbar

4 Answers4