概要

CSS のみで、table 要素のような上下中央揃えを実現するための方法と解説です。

たまたま閃いたのですが、CSS で上下中央揃えは実は意外と簡単にできました。demo を用意しましたので、いろいろな Web ブラウザで見てみてください。

対応 Web ブラウザ

• Firefox 1, 2
• Netscape 6, 7.1
• Safari 2, 3
• Opera 9.2
• IE 5.01, 5.5, 6, 7 ( inline-block で実現)

で意図した通りに表示されることを確認しました。

解説

中央揃えにしたい要素に対して、display:table-cell; を指定します。( table-cell が指定された要素には vertical-align が有効になります。)

div.sample1 div　{
display:table-cell;
}

ただし、 IE 6, 7 にはdisplay:table-cell; は無視されます。

IE6, 7 に対しては display:inline-block; と同等の効果を与えます。( inline-block が指定された要素にも vertical-align が有効になります。)

IE6, 7 で display:inline-block; と同等の効果を与えるには

* html div.sample1 div{/* IE 6 */
display:inline;
zoom:1;
}

*:first-child+html div.sample1 div{/* IE 7 */
display:inline;
zoom:1;
}

を指定します。( * html は IE 6 用の CSS ハック、*:first-child+html は IE 7 用の CSS ハックです。)

そして、vertical-align:middle; を指定します。要素の display がtable-cell または、inline-block なので vertical-align が有効になります。

div.sample1 div{
vertical-align:middle;
}

( このとき、vertical-align:top;を指定すれば上揃えに、 vertical-align:bottom; を指定すれば下揃えになります。 )

まとめると、<div class="sample1"> 内の3つの div の縦位置を中央にそろえる場合、HTML ソースは

<div class="sample1">
<div>
aaaa
</div>
<div>
aaaa<br />
aaaa
</div>
<div>
aaaa<br />
aaaa<br />
aaaa
</div>
</div>

となり、これに適用する CSS は

div.sample1{}

div.sample1 div{
display:table-cell;
width:100px;
margin-bottom:1px;
vertical-align:middle;
}

* html div.sample1 div{/* IE 6 */
display:inline;
zoom:1;
}

*:first-child+html div.sample1 div{/* IE 7 */
display:inline;
zoom:1;
}

となります。

Mac 版 IE に対応させるケースのコード

Mac 版 IE 5.2 は 、display プロパティで table-cell はサポートできていませんが、inline-block をサポートしているのでバンド・パス・フィルタを使ってMac IE 5.2 用に少し追記し、

div.sample1{ }

div.sample1 div{
display:table-cell;
width:100px;
margin-bottom:1px;
vertical-align:middle;
}

* html div.sample1 div{/* IE 6 */
display:inline;
zoom:1;
}

*:first-child+html div.sample1 div{/* IE 7 */
display:inline;
zoom:1;
}

/*\*//*/
* html div.sample1 div{
display:inline-block;
}
/**/

のように指定します。CSS の詳細度の都合で、セレクタに * html も書いています。また、Mac IE 5 では、HTML ソース上で inline-block にした要素同士の間に改行が入っていた場合、スペースができますので、改行せず HTML のソースを書く必要があります。



トラックバックURI

http://www.yomotsu.net/lab/css/alignmiddle/trackback

実験室に戻る