html - CSS: Center horizontal menu vertically -

this question has answer here:

• how vertically center text css? 32 answers

i've looked @ few solutions online can't find seems work.

this looks @ moment. want text centered center of 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 {     display: inline-block;     color: white;     text-align: center;     padding: 14px 16px;     text-decoration: none; }  #header li a:hover {     background-color: #111; } 

add vertical-align: middle; #header li a rule

#header li {     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 {      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>