html - CSS vertical alignment text inside li

Question

I am displaying number of boxes in a row with fix height and width, generated from <li> tags. now I need to align the text in the vertical center. The CSS vertical-align has no impact, maybe I am missing something???

I am not looking for tricks using (margin, padding, line-height), these will not work because some text are long and will break into two lines.

Please find the actual code:

CSS code

ul.catBlock{
  width:960px; 
  height: 270px; 
  border:1px solid #ccc; 
}

ul.catBlock li{
  list-style: none; 
  float:left; 
  display:block; 
  text-align: center; 
  width:160px; 
  height: 100px;
}

ul.catBlock li a{ 
  display: block;  
  padding: 30px 10px 5px 10px; 
  height:60px;
}

HTML code

<ul class="catBlock">
 <li><a href="#">IP Phone</a></li>
 <li><a href="#">Dual SIM Switch Server</a></li>
 <li><a href="#">IP PBX</a></li>
</ul>

Answer 1

Define the parent with display: table and the element itself with vertical-align: middle and display: table-cell.