QLOOKアクセス解析

Eiji

2012年1月20日

CSS で縦横共にセンタリング(上下左右中央揃え)


横方向のセンタリングは簡単にできるけど、縦方向となるとつまずくので、この縦横共にセンタリング出来る方法を忘れないうちにメモメモ。

DEMO

縦横220pxの<div>の中に縦横80pxの画像<img>を中央に表示させています。

sample2

HTML + CSS

<!-- CSS -->
<style>
.sample1 {
	display: table-cell;
	height: 220px;
	text-align: center;
	vertical-align: middle;
	width: 220px;
}
</style>

<!-- HTML -->
<div class="sample1">
<img src="img.jpg" alt="sample1">
</div>

<div> タグに CSS 「display: table-cell; 」を適応させることで、vertical-align が有効になって、縦方向にセンタリングしている。横方向には text-align です。

table-cell は、IE8以上でそれ以外のブラウザ(Chrome, Firefox, Safari, Opera 等)では既に対応済み。

もういらないと思うけど一応、IE6 と IE7 への、対処方法。

DEMO (IE6 & IE7 対応版)

縦横220pxの<div>の中に縦横80pxの画像<img>を中央に表示させています。

sample2

HTML + CSS (IE6 & IE7 対応版)

<!-- CSS -->
<style>
div.sample2 div {
	display: table-cell;
	height: 220px;
	text-align: center;
	vertical-align: middle;
	width: 220px;
}
* html div.sample1 div { /* IE 6 */
	display: inline;
	zoom: 1;
}
*:first-child+html div.sample2 div { /* IE 7 */
	display: inline;
	zoom: 1;
}
</style>

<!-- HTML -->
<div class="sample2">
<div>
<img src="img.jpg" alt="sample2">
</div>
</div>


関連記事


Web制作・記事一覧