如何将表格单元底部的文本居中?

时间:2013-05-06 15:34:45

标签: html css centering css-tables

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

我正试图将这个文本放在每个表格单元格的中间,但正如您所看到的那样,文本并未完全居中。有什么帮助吗?

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

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

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