CSS: Center horizontal menu vertically

Question

I've looked at a few solutions online but can't find any that seems to work. Current menu

This is what it looks like at the moment. I want the text to be centered with the center of the image.

Html code:

<div id="header">
<ul>
  <li><a class="no" href="index.html"><img src="images/miniLogo.png"/></a></li>
  <li><a class="active" href="index.html">HOME</a></li>
  <li><a href="product.html">PRODUCTS</a></li>
  <li><a href="contact.html">ORDER</a></li>
  <li><a href="about.html">ABOUT US</a></li>
  <li><a href="contact.html">CONTACT US</a></li>
</ul>
</div>

Css:

#header {
    background-color:#565656;
    color:white;
    text-align:center;
    height:10%;
}
#header ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align:center;
    vertical-align: middle;
}

#header li {
    display:inline;
}

#header li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#header li a:hover {
    background-color: #111;
}

With which image would you like to center the text... I don't see any images in your navigation except for the first link. Are you saying that you'd like the first link (the logo) to be on its own horizontal row with the subsequent links below? — Adam Scot, Mar 26 '16 at 16:21

Ason · Accepted Answer · 2016-03-26T16:34:08.297

Add vertical-align: middle; to the #header li a rule

#header li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    vertical-align: middle;
}

Sample snippet

#header {
    background-color:#565656;
    color:white;
    text-align:center;
    height:10%;
}
#header ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align:center;
}

#header li {
    display:inline;
}

#header li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    vertical-align: middle;
}

#header li a:hover {
    background-color: #111;
}

<div id="header">
  <ul>
    <li><a class="no" href="index.html"><img src="images/miniLogo.png"/></a></li>
    <li><a class="active" href="index.html">HOME</a></li>
    <li><a href="product.html">PRODUCTS</a></li>
    <li><a href="contact.html">ORDER</a></li>
    <li><a href="about.html">ABOUT US</a></li>
    <li><a href="contact.html">CONTACT US</a></li>
  </ul>
</div>

Thank you i was putting it in the wrong css rule. Thanks for the help! — Crimson-Med, Mar 26 '16 at 16:23
@Crimson-Med Yes, I see that now ... so you were almost there :) — Ason, Mar 26 '16 at 16:25

CSS: Center horizontal menu vertically

1 Answers1