CSS を使用して要素を中央揃えにするのは簡単ではありません。同じ有効な CSS 中央揃え設定でも、ブラウザーが異なれば動作も異なります。まず、CSS で要素を水平方向に中央揃えにする一般的な方法をいくつか見てみましょう。
1. 自動マージンを使用して中央揃えを実現します。CSS で要素を水平方向に中央揃えする場合は、margin 属性を使用することをお勧めします。要素の margin-left 属性と margin-right 属性を auto に設定するだけです。実際の使用では、中央に配置する必要があるこれらの要素のコンテナとして機能する div を作成できます。特に注意すべき点は、コンテナーの幅を指定する必要があることです。
div#container {
margin-left: auto;
margin-right: auto;
width: 168px;
}
このメソッドは、Windows プラットフォームの IE6 を含む、標準互換モードでも非常にうまく機能します。正常に表示されます。ただし、残念ながら、IE の以前のバージョンでは、この設定では中央揃えの効果が得られません。したがって、実際のプロジェクトでこのメソッドを使用する場合は、ユーザーの IE ブラウザのバージョンが 6.0 以降であることを確認する必要があります。
サポートは理想的とは言えませんが、ほとんどの設計者は可能な限りこのアプローチを使用することを推奨しています。この方法は、CSS を使用して要素の水平方向の中央揃えを実現するさまざまな方法の中で、最も正確かつ合理的であると考えられています。
2. text-align を使用して要素の中央揃えを実現する別の方法は、text-align 属性を center に設定し、それを body 要素に適用することです。このアプローチは完全なハックですが、ほとんどのブラウザと互換性があるため、場合によっては当然必要になります。
これがハックと呼ばれる理由は、このメソッドがテキスト属性をテキストに適用するのではなく、コンテナである要素に適用するためです。これにより、私たちにとっても余分な作業が発生します。レイアウトに必要な div を作成した後、次のコードに従って text-align 属性を本文に適用する必要があります。
body{
text-align:center;
その後
、問題は発生しますか? body のすべての子孫要素が中央に表示されます。
したがって、テキストをデフォルトの左揃えに戻す別のルールを記述する必要があります。
p {
テキスト整列:左;
}
この追加ルールにより、多少の不都合が生じることが想像できます。さらに、この標準に完全に準拠しているブラウザはコンテナの位置を変更せず、コンテナ内のテキストを中央に配置するだけです。
3. 自動マージンとテキスト配置を組み合わせて使用する テキストの配置と中央揃えの方法には下位互換性があり、自動マージンの方法はほとんどの最新のブラウザでもサポートされているため、多くのデザイナーは中央揃えの効果を得るために 2 つの方法を組み合わせて使用します。最大限のクロスブラウザーサポートを取得します:
body {
テキスト整列: 中央;
}
＃容器 {
マージン左: 自動;
マージン右: 自動;
境界線: 1 ピクセルの赤一色。
幅: 168ピクセル;
テキスト整列: 左
}
しかし、これはまだハックであり、決して完璧ではありません。コンテナ内でテキストを中央に配置するための追加のルールを記述する必要がありますが、少なくともどのブラウザーでも見栄えは良くなります。
4. ネガティブ マージン ソリューション ネガティブ マージン ソリューションは、要素にネガティブ マージンを追加するだけではありません。この方法では、絶対位置決めと負のマージンの両方を使用する必要があります。
このソリューションの具体的な実装方法は以下のとおりです。まず、中央に配置された要素を含むコンテナを作成し、それをページの左端から 50% の位置に絶対配置します。このように、コンテナの左マージンはページ幅の 50% から始まります。
次に、コンテナの左マージンの値をコンテナの幅の負の半分に設定します。これにより、コンテナがページの水平方向の中点に固定されます。
＃容器 {
背景: #ffc url(mid.jpg) リピート-y センター;
位置: 絶対;
左: 50%。
幅: 760ピクセル;
マージン左: -380px;
}
ほら、ハックなんてないよ！これは推奨される解決策ではありませんが、良いアプローチであり、非常にうまく機能します。Netscape Navigator 4.x でも問題なく動作します。これは驚くべきことではないでしょうか。したがって、最も広範なブラウザのサポートが必要な場合は、この方法が最良の選択になります。