DN*BLOG

これって、今まではfloatとか使っていたんですけど、どうやら「display: table-cell;」を使えばできるみたいです。
IE6、IE7にはハックで対応させてあります。

CSSソース

div.sampleBox p {
	display: table-cell;
	vertical-align: middle;
	margin: 0;
}

/*for IE6 */
* html .sampleBox p {
	display: inline;
	zoom: 1;
}

/*for IE7 */
*:first-child+html .sampleBox p {
	display: inline;
	zoom: 1;
}

xhtmlソース

<div class="sampleBox">
<p><img src="sample.gif" alt="footer画像" width="50" height="150" /></p>
<p>
サンプルテキスト<br />
サンプルテキストサンプルテキスト<br />
サンプルテキスト<br />
サンプルテキスト
</p>
</div>

こういったレイアウトって結構多くていちいちテーブルでレイアウトしていたけど、これがあればテーブルはいらないかな？

今後このテクニックは活躍する事間違いなしですね〜。

参考にさせていただいたサイト様
CSS HappyLifeさん – 画像とかの横にあるテキストを上下中央に