title: vertical align text in several li tag with float:left attribute
body: <p>i want to set vertical-align:midle; for text into li tags.this in my code but it doesn't work...</p>
  
  <p>HTML CODE :</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;ul id="selectable"&gt;
      &lt;li class="ui-state-default"&gt;AAAA &lt;/li&gt;
      &lt;li class="ui-state-default"&gt;BBB BBB&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;CCC &lt;/li&gt;
      &lt;li class="ui-state-default"&gt;DD&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;FFFFF&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>CSS CODE:</p>
  
  <pre><code>#container{position:relative; top:30px;}
  
  #selectable{ list-style-type: none;
      margin: 0;
      padding: 0;
      width: 450px;
      display:table;  }
  
  #selectable li{width:80px;
      height:80px;
      margin:4px;
      padding:8px;
      text-align:center;
      float:left;
      list-style:none;
      display: table-cell;
      vertical-align:middle;}`
  </code></pre>