html - 如何使表格单元格底部的文本居中？

Question

http://jsfiddle.net/myxzh/

 <ul>          
       <li><a href="news.asp">Hello</a></li>
       <li><a href="contact.asp">Hello</a></li>
       <li><a href="about.asp">Hello</a></li>
 </ul>

 ul {
display: table;
table-layout: fixed;
width: 100%;
padding:0;
 }

 li {
display: table-cell;
height: 150px;
border: 1px solid black;
position: relative;
text-align: center;

}

ul li a {
position: absolute;
bottom: 0;
text-align: center;
}

我试图将此文本居中在每个表格单元格的中间，但正如您所见，文本并没有完全居中。有什么帮助吗？

Answer 1

使用vertical-align:middle.

ul {
    display: table;
    table-layout: fixed;
    width: 100%;
    padding:0;
}

li {
    display: table-cell;
    height: 150px;
    border: 1px solid black;
    position: relative;
    text-align: center;
    vertical-align:middle;    
}

JSFiddle

Answer 2

将此添加到“li”部分的 CSS 中：

li {
   ...
   vertical-align: middle;    
}