CSS：垂直居中水平菜单

Question

我在线查看了一些解决方案，但找不到任何似乎有用的解决方案。

这就是目前的样子。我希望文本以图像的中心为中心。

Html代码：

<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

将vertical-align: middle;添加到#header li a规则

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

示例代码段

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