高さの違う2つの要素を縦中央に並べる(垂直方向にセンタリングする)方法

この記事はアピリッツの技術ブログ「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要素に幅を指定しています。

囲う要素が多くて少々見辛いですが、結構使うシーンがあると思いますので
参考にしてみてください。