display: table-cell で vertical-alignを実装

サイトを作っているとき、既存のCSSではどうにもならない場面があった。
たとえばこんな場面で、赤ボーダーで囲まれた部分の下にもう一行テキストを追加したいとする。

• １
• ２
• ３

テキスト。

---

この赤ボーダーで囲まれたテキストは、マージンによってセンタリングされているため、
この下にさらにテキストを追加しようとするとこうなってしまう。
（ここでは「テキスト。」ごとにひとつのPタグでくくっているので、下記の表示は、
2つのPタグをDivで囲んでいます。）

• １
• ２
• ３

テキスト。

テキスト。

---

そこで、下記のようにマージン調整してやる。

• １
• ２
• ３

テキスト。

テキスト。

---

このやり方だと、テキストが1行になるときと2行になるときでいちいちクラスを分けなければいけないし、文字サイズを大きくしたときにレイアウトが崩れてしまう。
そこで、display: table-cellを使うことを思いつきました。

なぜdisplay: table-cellを使うのかというと、vertical-alignプロパティを使いたいから。
vertical-alignというのは、インライン要素かテーブルのセルにしか効きません。
インライン要素にするとフロートがうまくいかなさそうだったので、display: table-cellを使いました。

2行でも。

• １
• ２
• ３

テキスト。

テキスト。

---

1行でも。

• １
• ２
• ３

テキスト。

---

ただし、heightを指定してないときちんとvertical-align: middle;してくれないみたいです。
会社帰りの電車の中で急にこれを思いついて、 試しにやってみたらうまくいったので、即席で記事を書いてます。
ですのでブラウザチェックはしていません、ご了承ください。（動作確認：Firefox3）
（近いうちに確認するつもりです）

お仕事していると勝手にCSSをいじれない場面もあり、
想定していない場所にコンテンツ追加の以来が舞い込んだりもします。
なるべく使いまわしの効く、伸縮自在なコードを見つけていければなと思います。

---

7/11追記
ブラウザチェックしてみましたが、各ブラウザの最新バージョンでないと際限が難しいようです。。。
再現OK：IE8、Firefox2/3、GoogleChrome2、Opera
私の制作環境はSafari3なのですが、Safari3ではレンダリングされませんでした。
ですが、Chrome2で再現可能なところを見ると、もしかするとSafari4だとレンダリング可能かもしれません。