html - CSS 导航垂直对齐

Question

我不知道获得我想要的结果的最佳实践。我在这里使用了表格，这让我接近了我想要的东西。

结果没有垂直居中的文本，我不知道怎么做。尝试使用 UL 来获得这个但没有成功:

#hotspotbg table {
  margin-top: 1px;
}
#hotspotbg table tr td {
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
#hotspotbg table tr td a {
  text-align: center;
  text-decoration: none;
  display: block;
  font-family: Tahoma, Geneva, sans-serif;
  color: #fff;
  height: 51px;
}
#hotspotbg table tr td a:hover {
  background: #FFF;
  color: #000;
}

<table width="900" height="51px" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td width="25%" height="51" valign="middle"><a href="#">Home</a>
    </td>
    <td width="25%"><a href="#">Products</a>
    </td>
    <td width="25%"><a href="#">Reviews</a>
    </td>
    <td width="25%"><a href="#">Contact</a>
    </td>
  </tr>
</table>

Answer 1

将子项(在您的情况下为 a 元素)的 line-height 设置为父项的高度，将垂直对齐a 元素的文本。有关更多信息，请参见下文。

.wrapper {
    height: 70px;
    width: 100%;
    background: red;
    overflow: hidden;
}

.wrapper a {
    /*NOT AFFECTING THE VERTICAL ALIGN*/
    display: block;
    float: left;
    height: 70px;
    width: 50%;
    color: #fff;
    text-align: center;
    /*AFFECTING VERTICAL ALIGN*/
    line-height: 70px;
}

<div class="wrapper">
    <a href="#">test</a>
    <a href="#">nice</a>
</div>