DN*BLOG

2008.4.15

CSSで画像の横にあるテキストを上下中央に

サンプル画像

これって、今までは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さん – 画像とかの横にあるテキストを上下中央に

FavoriteLoadingAdd to favorites

Category : (x)HTML , CSS , Web Design

関連する記事