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

上の画像のような高さの違う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> .item_l { display: -moz-inline-box; display: inline-block; vertical-align: middle; } .item_r

[kakuhen1rfeverheiten]

div 高さを揃える