html - 使用显示表格单元格垂直对齐文本

Question

我在垂直对齐文本时遇到一点问题。我已经尝试了几种方法，它要么垂直对齐文本，然后垂直堆叠列表项，要么如果我使用 display: inline-block 文本对齐到顶部。不知道我错过了什么。非常感谢任何帮助。谢谢。

https://jsfiddle.net/u4kLvjox/

html代码

<ul class="maptext">
  <a class="map-active" href="right_1.html"><li>FIRST ITEM</li></a>
  <a href="right_2.html"><li>SECOND LIST<br> ITEM</li></a>
  <a href="right_3.html"><li>THIRD LINE ITEM</li></a>
</ul>

CSS代码

ul.maptext {
    color: #743237;
    line-height: 22px;
    font-size: 11px;
    text-align:center;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    display: inline-block;
    margin: 0;
}

ul.maptext li {
    background-color: #b0b659;
    color: #743237;
    display: inline-block;
    width: 33.3333%;
    height: 48px;
    text-align: center;
    vertical-align: middle;
}

ul.maptext a {
    line-height: 15px;
    color: #743237;
}

ul.maptext li:hover {
    background-color: #743237;
    color: #fff;
}

Answer 1

正如评论者所指出的，您需要将 <a> <li> 内的标签标签。这将解决部分问题。

要使整个 block 可点击，请提供您的 <a>元素a display: block;用height: 100% .

这是一个 full demo .