要素の水平方向の中央揃えを実現する3つの方法と、固定レイアウトとフローレイアウトの概念の理解

CSS でテキストを中央揃えにするプロパティは非常に簡単に実現できます。text-align:center を設定するだけです。ここで言及している「要素」は、実際にはコンテナを指します。より適切なラベルが必要な場合は、div で表す必要があります。
多くのウェブデザイナーは、要素を水平方向に中央揃えするという考えに精通していると思います。しかし、時々、なぜ要素を水平方向に中央揃えにする必要があるのか疑問に思うことがあります。理由は何ですか？これらは、私が書き留めた個人的な意見の一部です。

まず、要素を水平方向に中央揃えするには、CSS デザインにおける固定レイアウトと流動レイアウトの概念を理解する必要があります。それらの直感的な違いは、要素に幅が設定されているかどうかです。以下は、固定レイアウトとフローレイアウトの違いを簡単に示す 2 つのコードスニペットです。
1. 固定レイアウトのデモ:

コードをコピー

コードは次のとおりです。

<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>位置レイアウト</title>
<スタイルタイプ="text/css">
.wrapper{幅:750px;位置:相対;マージン:0自動;テキスト配置:左;}
.contentArea{幅:450px;位置:絶対;上:0;左:150px;高さ:500px;背景:#96c;}
.leftPanel{幅:150px;位置:絶対;上:0;左:0;高さ:500px;背景:#999;}
.rightPanel{幅:150px;位置:絶対;上:0;左:600px;高さ:500px;背景:#06C;}
</スタイル>
</head>
<本文>
<div class="wrapper">
<div class="contentArea"></div>
<div class="leftPanel"></div>
<div class="rightPanel"></div>
</div>
</本文>
</html>

2. フローレイアウトのデモ:

コードをコピー

コードは次のとおりです。

<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>col3-margin-layout</title>
<スタイルタイプ="text/css">
.contentArea{余白:0 160px;高さ:500px;背景:#96c;}
.leftPanel{幅:150px;フロート:左;高さ:500px;背景:#999;}
.rightPanel{幅:150px;フロート:右;高さ:500px;背景:#06C;}
</スタイル>
</head>
<本文>
<div class="wrapper">
<div class="leftPanel"></div>
<div class="rightPanel"></div>
<div class="contentArea"></div>
</div>
</本文>
</html>

上記の 2 つの例から、フローレイアウトでは要素がすべて全画面表示されるため、要素を水平方向に中央揃えすることは不可能であると結論付けることができます。固定レイアウトの場合のみ、幅が制限されているため、要素を水平方向に中央揃えすることが可能です。
第二に、固定レイアウトの実装では、必ずしも要素を水平方向に中央に配置する必要はありません。これを行う理由は、外観に影響を与える大きな空白スペースを片側に持たせるのではなく、ブラウザの両側に均等な余白を確保するためです。
これらはすべて簡単な知識です。それでは本題に入りましょう。
============================================================================
要素を水平方向に中央揃えする方法は 3 つあります。それぞれを 1 つずつ紹介します。次のように：
1. 自動マージン方式。
これは、Web デザイナーに最も馴染みのある方法です。コンテナーの幅を設定し、margin: auto スタイルを設定する必要があります。コードスニペットは次のとおりです。

コードをコピー

コードは次のとおりです。

<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>位置レイアウト</title>
<スタイルタイプ="text/css">
.wrapper{幅:750px;マージン:0自動;位置:相対;}
.contentArea{幅:450px;位置:絶対;上:0;左:150px;高さ:500px;背景:#96c;}
.leftPanel{幅:150px;位置:絶対;上:0;左:0;高さ:500px;背景:#999;}
.rightPanel{幅:150px;位置:絶対;上:0;左:600px;高さ:500px;背景:#06C;}
</スタイル>
</head>
<本文>
<div class="wrapper">
<div class="contentArea"></div>
<div class="leftPanel"></div>
<div class="rightPanel"></div>
</div>
</本文>
</html>

このコードから、この方法はさまざまな主流のブラウザ（IE6 を含む）で適切に表示されることがわかります。IE6 より前のバージョンでは機能せず、要素は依然として左側に配置されます。ブラウザのバージョンが低いという問題を考慮しなければ、これが最も便利です。
2. テキストの中央揃えと自動余白を組み合わせます。
この方法は、IE6 より前のバージョンが margin:0 auto をサポートしていないという問題を解決できます。その使用法は、本文に text-align:center スタイルを設定することです。具体的なコードは次のとおりです。

コードをコピー

コードは次のとおりです。

<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>位置レイアウト</title>
<スタイルタイプ="text/css">
本文{text-align:center;}
.wrapper{幅:750px;位置:相対;マージン:0自動;テキスト配置:左;}
.contentArea{幅:450px;位置:絶対;上:0;左:150px;高さ:500px;背景:#96c;}
.leftPanel{幅:150px;位置:絶対;上:0;左:0;高さ:500px;背景:#999;}
.rightPanel{幅:150px;位置:絶対;上:0;左:600px;高さ:500px;背景:#06C;}
</スタイル>
</head>
<本文>
<div class="wrapper">
<div class="contentArea"></div>
<div class="leftPanel"></div>
<div class="rightPanel"></div>
</div>
</本文>
</html>

ここで、text-align:center は CSS ハックとして使用されています。これはテキストスタイルであり、要素を中央揃えにするスタイルを実現するために本文で使用されているため、本来行うべきではないことが行われています...
3. ネガティブマージン方式。
このメソッドの実装は、前の 2 つのメソッドよりも複雑です。位置決めと組み合わせて使用する必要があります。具体的なコードは次のとおりです。

コードをコピー

コードは次のとおりです。

<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>負のマージン要素の中央</title>
<スタイルタイプ="text/css">
.wrapper{幅:750px;位置:相対;左:50%;左マージン:-375px;}
.contentArea{幅:450px;位置:絶対;上:0;左:150px;高さ:500px;背景:#96c;}
.leftPanel{幅:150px;位置:絶対;上:0;左:0;高さ:500px;背景:#999;}
.rightPanel{幅:150px;位置:絶対;上:0;左:600px;高さ:500px;背景:#06C;}
</スタイル>
</head>
<本文>
<div class="wrapper">
<div class="contentArea"></div>
<div class="leftPanel"></div>
<div class="rightPanel"></div>
</div>
</本文>
</html>

まず、コンテナーをドキュメントに対して右に 50% オフセットします。次に、コンテナーの左余白をコンテナー幅の負の半分に設定して、要素を水平方向に中央揃えにします。この方法にはハックがなく、互換性が高いため、幅広いブラウザで一貫したパフォーマンスを発揮できます。
上記は、私が知っている要素の水平方向の中央揃えを実現する 3 つの方法です。いずれも比較的簡単なので、復習と知識のまとめとして書き留めておきます。

<<: CSSは親コンテナのdivをimg画像で埋め、コンテナのサイズに適応します。

>>: 初心者向けのMySQLデータベースとテーブルDDLの作成と操作の学習