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

设置 line-height 的 child (a 元素）到 parent 的高度，将垂直对齐 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>

CSS 导航垂直对齐

CSS Navigation Vertical Align

html

css

vertical-alignment