title: CSS vertical alignment text inside li
body: <p>I am displaying number of  boxes in a row with fix height and width, generated from &lt;li&gt; tags.
  now I need to align the text in the  vertical center.
  The CSS vertical-align has no impact, maybe I am missing something???</p>
  
  <p>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.</p>
  
  <p>Please find the actual code:</p>
  
  <h2>CSS code</h2>
  
  <pre><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;
  }
  </code></pre>
  
  <h2>HTML code</h2>
  
  <pre><code>&lt;ul class="catBlock"&gt;
   &lt;li&gt;&lt;a href="#"&gt;IP Phone&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Dual SIM Switch Server&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;IP PBX&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>