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 で簡単に上下中央揃えを実現する | ヨモツネット
Very interesting points you have mentioned, thank you for posting.