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

←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。

だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！

display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。

---- こっから続き

デモページ

• 画像とかの横にあるテキストを上下中央にする。のデモページ

ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。

ちょっと、IE6で確認してないので、ダメだったらご連絡ください。
IE6対応しました。ハックの書き方がいけなかったようです。すみません。

CSS

div.centeringTest p {
	display: table-cell;
	vertical-align: middle;
	margin: 0;
}
 
/*for IE6 */
* html .centeringTest p {
	display: inline;
	zoom: 1;
}
 
/*for IE7 */
*:first-child+html .centeringTest p {
	display: inline;
	zoom: 1;
}

display: table-cell;とvertical-align: middle;でIE以外のブラウザで上下中央にして、IEはIE用のハックで対応してっていう感じです。

XHTMLソース

<div class="centeringTest">
<p class="image"><img src="img/share/bg_footer.gif" alt="footer画像" width="100" height="300" /></p>
<p>
あああああああ<br />
いいいいいいいいいい<br />
うううううう<br />
あああああああ<br />
いいいいいいいいいい<br />
うううううう<br />
えぇぇぇぇえ！！！
</p>
<!-- / .centeringTest --></div>

結構こういうデザイン上がってきたりして、テーブル要素使えっていうんですか？
みたいに思ってたけど、コレ使えば今後は解決できそうやー！

ヨモツネットの中の人に感謝です！！

各種SBMに追加

• 
• 
• 
• 
• 
• 
•