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

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>标记内。这将解决部分问题。

要使整个区块可以点击，请为<a>元素display: block;添加height: 100%。

这里是full demo。

Answer 2

您可以通过添加:before样式垂直对齐文字，如下所示。

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;
margin: 0 -2px;
}

ul.maptext a {
line-height: 15px;
color: #743237;
  display: block;
  height: 100%;
}
ul.maptext a:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 1px;
height: 100%;
}
ul.maptext li:hover {
background-color: #743237;
color: #fff;
}

#mapview {
  width: 700px;
  }
}

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

Answer 3

要获得所需的结果，需要更少的标记：

.maptext {
    display: table; 
    table-layout: fixed;
    height: 48px;
  
    color: #743237;
    line-height: 22px;
    font-size: 11px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
}

.maptext a {
    display: table-cell; 
    width: 33.3333%;
    text-align: center;
    vertical-align: middle;

    background-color: #b0b659;
    line-height: 15px;
    color: #743237;
}

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

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

唯一的缺点是没有ARIA支持的屏幕阅读器会丢失列表结构，尽管仍然可以访问链接。

Answer 4

我试试

display:table-cell; 

和父元素：

display:table;

这是一个例子： fiddle

＆＃13;

＆＃13;

ul.maptext {
    color: #743237;
    font-size: 11px;
    text-align:center;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    display: table;
    margin: 0;
    width:100%;
    list-style-type:none;
    padding:0;
}

ul.maptext a {
    background-color: #b0b659;
    color: #743237;
    display: table-cell;
    width: 33.333%;
    height: 48px;
    text-align: center;
    vertical-align: middle;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;