この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。
上の画像のような高さの違う2つの要素を、縦中央に並べる方法をご紹介します。
サンプルでは画像とテキストですが、テキスト同士、画像同士でも 同じことができます。
確認ブラウザ IE6～8、FF2、3
まずはXHTML<div id=”box”>
<span class=”item_l”><img src=”sample.jpg” width=”171″ height=”173″ alt=”sample” /></span>
<div class=”item_r”><p>何かに使おうと思って描いたイラストです。<br />ネットワークっぽいイメージ。</p></div>
</div>
次はCSS.item_l {
display: -moz-inline-box;
display: inline-block;
vertical-align: middle;
}
.item_r {
display: -moz-inline-box;
display: inline-block;
vertical-align: middle;
}
/*IE6用ハック*/
* html .item_l,
* html .item_r {
display: inline;
zoom: 1;
}
/*IE7用ハック*/
*:first-child+html .item_l,
*:first-child+html .item_r {
display: inline;
zoom: 1;
}
p {
width: 300px;
line-height: 130%;
margin-left: 20px;
}
Firefox2対しては「display: -moz-inline-box;」という独自のプロパティで対応。
IE6、7に対しては「display: inline;」に「zoom: 1;」とすることで
inline-block扱いになります。
また、「display:inline-block」内のブロック要素の幅を指定しないと、
その親要素に幅を指定していてもはみ出してしまいます。
サンプルの場合は右側のテキストのP要素に幅を指定しています。
囲う要素が多くて少々見辛いですが、結構使うシーンがあると思いますので
参考にしてみてください。
