872 Style
  1. TOP
  2. MEMO
  3. CSS
  4. CSSで垂直中央揃え

CSS で垂直中央揃え

今まで、垂直中央をどうやったらいいのかわからなかったのですが、ヨモツネットさんの「CSS で簡単に上下中央揃えを実現する」に答えが書いてありました。display: table-cell と vertical-align: middle; を組み合わせることで、垂直中央に配置することができます。vertical-align: top; を指定すれば上揃えに、vertical-align: bottom; を指定すれば下揃えになります。

CENTER
CENTER
CENTER
CENTER
CENTER
CENTER
HTML
<div id="center_box">
	<div class="box_master">
		<div class="box">CENTER</div>
		<div class="box">CENTER<br />CENTER</div>
		<div class="box">CENTER<br />CENTER<br />CENTER<br /></div>
	</div>
</div>
CSS
#center_box div.box_master {
	display: table;
	border-spacing:
	10px;
}
#center_box div.box {
	background-color: #fff0f5;
	text-align: center;
	vertical-align: middle;
	width: 100px;
	height: 100px;
	border-style: outset;
	border-width: 1px;
	display: table-cell;
}

ただしこれは、Firefox, Opera, Google Chorm, Safari, InternetExplorer 8 等ではできますが、いつも CSS が明後日の方向を向いている IE 5, 6, 7 ではできません。
潔くあきらめるか、違う方法を試みましょう

IEだけ違う方法

IE 5.01, 5.5, 6, 7 は display:table-cell; が無視されるので、inline-blockを使います。

* html #center_box div.box{/* IE 6 */
	display:inline;
	zoom:1;
}

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

* html は IE6用のCSSハック、*:first-child+html はIE7用のCSSハックです。
これを先程のCSSに追加してあげれば、IE6,7 でも垂直中央ができるようになります。
また、 Mac 版 IE 5.2 は 、display プロパティで table-cell はサポートできていませんが、inline-block をサポートしているので下記のものを追記します。 

/*\*//*/
* html #center_box div.box{
display:inline-block;
}
/**/
Return