CSSで中央配置

はてなブックマーク

CSSで中央配置まとめ。

■左右中央
中央寄せしたいブロック要素にmargin:0 auto;を適用。
でよいはずなのですがIE6ではバグで中央にならないのでCSSハック。text-align:centerを適用したdivで囲みます。中央寄せしたブロック内のテキストも中央揃えになるので、text-align:leftで元通り。
IE6のシェアがそこそこあるうちはこれが正解のようです。
<div class="hakku">
	<div class="mannnaka"> hogehoge </div>
</div>
div.hakku{
	text-align:center;
}

div.mannnaka{
	margin:0 auto;
	text-align:left;
}


■上下中央
position:absoluteでも実現可能ですが、heightが指定されていることが前提だったりするので、ここではheightに依存しない方法。
通常ではvertical-alignは適用されないブロック要素を、テーブル要素もしくはインライン要素とすることにより適用させます。IE6,IE7用にCSSハックが必要です。
<div class="kakomi">
	<div> hogahoga </div>
</div>
div.kakomi div{
display:table-cell;
width:100px;
margin-bottom:1px;
vertical-align:middle;
}

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

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

こちらで詳しく解説されています。
CSS で簡単に上下中央揃えを実現する | ヨモツネット

トラックバック(0)

トラックバックURL: http://endlessblank.com/mt/mt-tb.cgi/10

コメント(1)

Very interesting points you have mentioned, thank you for posting.

コメントする

  • RSS