デザイン上の表現ではよく使われるのにCSSでの再現は意外と難しいボックス内での上下中央揃え。
ボックス要素（block要素）には上下中央揃えの指定は無く、vartical-alignも効きません。
そういった場合の時は、上下のpaddingで何とか調整をしたり、諦めてテーブルで再現したり、悩みどころだったりするのですが、いちよCSSでも再現する方法はあります。
「display:table-cell」を使用する方法。
ボックス要素とする<div>に対してdisplayをtable-cellにすることで、vartical-alignの効果を発生させるもの。
ですが、IEではこの「display:table-cell」はサポートされていないので、IEのみ「display:inline」の指定をします。
まずは再現したサンプルについて。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
実際のHTMLソース＆CSSは以下の通り。
=== ココカラ ========================================
<html>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS BOX 上下中央揃え</title>
<meta http-equiv=”content-style-type” content=”text/css” />
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
#container {
width: 400px;
font-size: 12px;
line-height: 180%;
}
#container div {
width: 200px;
display: table-cell;
vertical-align: middle;
}
* html #container div {
display: inline;
zoom: 1;
}
*:first-child+html #container div {
display: inline;
zoom: 1;
}
</style>
</head>
<body>
<div id=”container”>
<div><img src=”img/cat.jpg” alt=”” width=”200″ height=”150″ /></div>
<div>画像に対してテキスト上下中央揃え。<br />画像に対してテキスト上下中央揃え。</div>
</div><!–/container–>
</body>
</html>
=== ココマデ ========================================
画像とテキストがくっついてしまっていますが、<div>にクラスを付けることでそれぞれ幅の指定を変えたり、margin、paddingを指定することも可能です。
この方法だとボックスの上下中央揃えは、ほぼどのブラウザでも大丈夫ですが、ハックを使うあたりで何だかあまり綺麗な指定とは思えず何か納得いかず…
何か他にいい方法を知っている方、情報をお願いしますデス。
※ちなみにボックス要素の中に入るテキストが一行のみの場合はCSSにて、そのボックスの高さ（height）と行間（line-height）の値を同じにすることで上下中央揃えは実現できます。
———————–
div {
height: 100px;
line-height: 100px;
}
———————–
こんな感じに。
以上、ご参考までに。。。