まず、単純な XHTML/HTML ファイル コード (部分) を見てみましょう。私たちの目的は、#container を水平方向に中央揃えにすることです。
<本文>
<div id="コンテナ">
<h1>コンテンツ</h1>
<p>Lorem ipsum dolor sit amet、consectetuer adipiscing elit.</p>
</div>
</body>適応マージンを使用する (自動マージン)
要素を水平方向に中央揃えにするための推奨方法は、margin プロパティを使用し、左右の値を auto に設定することです。ただし、#container の幅を指定する必要があります。
div#コンテナ {
マージン左: 自動;
マージン右: 自動;
幅:168ピクセル;
}
このソリューションは、Web 標準準拠モードであれば、IE6 であっても、最新のブラウザーで動作します。残念ながら、以前のバージョンの IE/Win では動作しません。このための表を作成します。 アダプティブ ボーダーのサポート リストの閲覧 ブラウザのバージョンのサポート
Internet Explorer 6.0、コンプライアンスモード はい
Internet Explorer 6.0、互換モード いいえ
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 はい
サファリ 1.2 はい
ブラウザのサポートによって制限されますが、ほとんどの設計者は、可能な限りこれを行うことを推奨しています。ただし、あらゆる状況で CSS を使用できます。テキスト配置 (text-align) の使用 この解決策では、body 要素に適用され、center の値が割り当てられる text-align プロパティを使用する必要があります。
体{
テキスト整列:中央;
}
すべてのブラウザに適しており、完全で、すぐに利用できます。ただし、これはテキストに与えられるプロパティであり、#container 内のテキストも中央揃えになります。したがって、レイアウトに関して追加の作業を行う必要があります。
div#コンテナ{
テキスト整列: 左;
}
このようにして、テキストの配置をデフォルトの状態に戻すことができます。統合された境界線とテキストの配置 テキストの配置には下位互換性があり、最新のブラウザーもアダプティブ境界線をサポートしているため、多くのデザイナーはこれらを組み合わせてブラウザ間での使用を実現しています。
体{
テキスト整列: 中央;
}
＃容器 {
マージン左: 自動;
マージン右: 自動;
境界線: 1 ピクセルの赤一色。
幅: 168ピクセル;
テキスト整列: 左
}
残念ながら、まだハックなので完璧ではありません。テキストの配置には冗長なルールを記述する必要があります。しかし今では、より完璧なクロスブラウザー ソリューションを使用できるようになりました。
負の境界解