ul > li > div でテーブルレイアウト

html + css で <table> を使わずにテーブルレイアウトを作る方法をググったところ、<div> のみで構築する方法と、<ul> <li> <div> で構築する方法が多かった。
<div> のみだと class が増えそうなので、<ul> <li> <div> で構築する方法を選択。

しかし、検索結果の情報には、なぜか <li> の下の <div> に「float:left;」を使ったものが多い。
「float:left;」の何が問題かというと、「vertical-align」と共存できない・・・

そこで、下記を使ってみた。
ul → table , li → tr , div → td のように使用可能。

ul.table-layout {
    list-style: none;
    display: table;
    margin: 0;
    padding: 0;
}
ul.table-layout > li {
    display: table-row;
}
ul.table-layout > li > div {
    display: table-cell;
    vertical-align: middle;
}

使用例

[HTML ソース]

<ul class="table-layout">
    <li>
        <div style="padding:5px">
            <div style="border:1px solid #ff00ff">て<br>す<br>と</div>
        </div>
        <div style="padding:5px">
            <div style="border:1px solid #ffff00">レイアウト</div>
        </div>
        <div style="padding:5px">
            <div style="border:1px solid #00ffff">で<br>す</div>
        </div>
    </li>
</ul>

[プレビュー]

• て
  す
  と
  レイアウト
  で
  す

備考

この方法は "dispaly: table" に対応してないブラウザでは不可。
つまり、IE7 等では諦めて <table> を使うのが無難。