CSS horizontal menu issue - buttons on multiple lines text -

i have simple horizontal menu square buttons have text on multiple lines. want them appear centered vertical. tried many solutions , nothing seems work. here code, feel free edit. keep buttons square , text on multiple lines.

i want text in yellow box centered in middle of yellow box. vertically

html

<div>   <ul>     <li> <a href="#">text1</a></li>         <li> <a href="#">short</a></li>         <li> <a href="#">3 row longer</a></li>         <li> <a href="#">2 rows text</a></li>         <li> <a href="#">text3</a></li>         <li> <a href="#">text6</a></li>         <li> <a href="#">text3</a></li>         <li> <a href="#">more text here</a></li>       </ul> </div> 

css

div * {   display:block;   padding:0;   margin:0; }  ul{   list-style-type:none;   background-color:red;      width: 496px;   height: 62px; }  li{   display:inline-block;   width:62px;   height:62px;   text-align:center;   background-color:green;   float:left; }  a{   display:block;   text-decoration:none;   background-color:yellow;   font-size:12px;   text-transform:uppercase;   font-family:arial;   width:58px;   height:58px;   padding:0px;   margin:2px; }  a:hover{   background-color:white; } 

http://jsfiddle.net/58myy/

thanks

i'm little unsure of you're describing, think it:

update think looking for.

you can vertical align using display:table-cell , vertical-align:middle together.

li{    display:table-row; }  a{    display:table-cell;    vertical-align:middle; } 

http://jsfiddle.net/58myy/4/