How to center text at bottom of table cell?

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

I'm trying to center this text in the middle of each table cell but as you can see the text is not quite centered. Any help?

Answer 1

Use 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