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