CSSで中央配置

CSSで中央配置まとめ。

■左右中央: 中央寄せしたいブロック要素にmargin:0 auto;を適用。
でよいはずなのですがIE6ではバグで中央にならないのでCSSハック。text-align:centerを適用したdivで囲みます。中央寄せしたブロック内のテキストも中央揃えになるので、text-align:leftで元通り。
IE6のシェアがそこそこあるうちはこれが正解のようです。
1.<div class="hakku">
2.    <div class="mannnaka"> hogehoge </div>
3.</div>
1.div.hakku{
2.    text-align:center;
3.}
4.
5.div.mannnaka{
6.    margin:0 auto;
7.    text-align:left;
8.}
■上下中央: position:absoluteでも実現可能ですが、heightが指定されていることが前提だったりするので、ここではheightに依存しない方法。
通常ではvertical-alignは適用されないブロック要素を、テーブル要素もしくはインライン要素とすることにより適用させます。IE6,IE7用にCSSハックが必要です。
1.<div class="kakomi">
2. <div> hogahoga </div>
3.</div>
01.div.kakomi div{
02.display:table-cell;
03.width:100px;
04.margin-bottom:1px;
05.vertical-align:middle;
06.}
07.
08.* html div.kakomi div{/* IE 6 */
09.display:inline;
10.zoom:1;
11.}
12.
13.*:first-child+html div.kakomi div{/* IE 7 */
14.display:inline;
15.zoom:1;
16.}

トラックバック(0)