←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。
だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ 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>
結構こういうデザイン上がってきたりして、テーブル要素使えっていうんですか？
みたいに思ってたけど、コレ使えば今後は解決できそうやー！
ヨモツネットの中の人に感謝です！！