まず、単純な XHTML/HTML ファイル コード (部分) を見てみましょう。 #container を水平方向に中央揃えにすることです。
content
Lorem?ipsum?dolor?sit ?amet,?consectetuer?adipiscing?elit.Phasellus?varius?eleifend.
適応境界線を使用する ( auto?margin)
要素を水平方向に中央揃えするための推奨方法は、margin プロパティを使用し、左右の値を auto に設定することです。ただし、#container の幅を指定する必要があります。
div#container?{
margin-left:?auto;
margin-right:?auto;
width:?168px;
}
このスキームは最新のブラウザーで動作しますWeb 標準互換モード (準拠?モード) であれば、IE6 であってもすべて有効です。残念ながら、以前のバージョンの IE/Win では動作しません。このためのテーブルを作成します:
適応境界サポート リストの参照?ブラウザ?バージョン?サポート?
Internet Explorer 6.0、準拠?モード?はい?
Internet Explorer 6.0、quirks?mode?いいえ?
Internet Explorer 5.5 Windows?いいえ?
Internet Explorer 5.0 Windows?いいえ?
Internet Explorer 5.2 Macintosh?はい?
Mozilla 現在のすべてのバージョン?はい?
Mozilla Firefox?すべてのバージョン?はい?
Netscape? 4.x?いいえ?
Netscape?6.x+?はい?
Opera?6.0、?7.0?Macintosh?および?Windows?はい?
Safari?1.2?はい?
ブラウザのサポートには制限があるにもかかわらず、ほとんどのデザイナーは可能な限りこれを行うことを推奨しています。ただし、あらゆる状況で CSS を使用できます。
テキスト配置 (text-align) を使用する
この解決策では、body 要素に適用され、center の値が割り当てられる text-align プロパティを使用する必要があります。
body{
text-align:center;
}
すべてのブラウザを公平かつ徹底的に扱い、簡単に操作できます。ただし、これはテキストに与えられるプロパティであり、#container 内のテキストも中央揃えになります。したがって、レイアウトに関して追加の作業を行う必要があります。
div#container{
text-align:?left;
}
このようにして、テキストの配置をデフォルトの状態に戻すことができます。
統合された境界線とテキスト配置
テキスト配置には下位互換性があるため、最近のブラウザーはアダプティブ境界線もサポートしており、多くのデザイナーはこれらを組み合わせてブラウザー間での使用を実現しています。
body{
text-align:?center;
}
#container?{
margin-left:?auto;
margin-right:?auto;
border :?1px?solid?red;
width:?168px;
text-align:?left
}
残念ながら、まだハックなので完璧ではありません。テキストの配置には冗長なルールを記述する必要があります。しかし今では、より完璧なクロスブラウザー ソリューションを使用できるようになりました。
負の境界ソリューション
このソリューションは絶対位置決め (absolute?positioning?) と組み合わせる必要があります。まず、#container を絶対位置に配置し、#container の左端がページ解像度の半分になるように 50% 左にオフセットします。次に、#container の左マージンを #container の幅の半分に等しい負の値に設定します。
#container?{
background:?#ffc?url(mid.jpg)?repeat-y?center;
position:?absolute;
left:?50%;
width :?760px;
margin-left:?-380px;
}
ほら、いいえ?ハック! Netscape?4.x でもサポートされています。
