CSS: Zentrales horizontales Menü vertikal

Question

Ich habe mir ein paar Lösungen online angesehen, kann aber keine finden, die zu funktionieren scheinen.

So sieht es im Moment aus. Ich möchte, dass der Text in der Mitte des Bildes zentriert ist.

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; 
} 

Answer 1

hinzufügen vertical-align: middle; zum #header li a Regel

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

Beispiel Schnipsel

#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>