CSS: Dikey olarak yatay dikey menü

Question

Birkaç çözümü çevrimiçi baktım ama işe yarayacak bir şey bulamıyorum.

Şu an göründüğü gibi. Metnin, görüntünün merkezi ile ortalanmasını istiyorum.

html kodu:

<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

#header li a kuralına vertical-align: middle; ekle

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

Numune pasajı

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