CSSでブロック要素を横並び＆上下中央揃え

CSSでブロック要素を横並びにする方法に「float: left OR right」がありますが
floatを使うと、その要素内を上下中央揃えにする「vertical-align: middle」が効きません。
以下は横並びにして、かつ、上下中央揃えにする方法です。

CSS適応前

<ul>
   <li>データ</li>
   <li>データ</li>
   <li>データ</li>
   <li>データ</li>
   <li>データ</li>
</ul>

<ul>

</ul>

横並び＆上下中央揃えにするCSS

ul{
    display:table;
}

ul li {
    display:table-cell;
    width:22%;
    list-style:none;
}

ul{

display:table;

}

ul li {

display:table-cell;

width:22%;

list-style:none;

}

CSS適応後