Как центрировать текст внизу ячейки таблицы?

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

Добавьте это в CSS в разделе «Ли»:

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