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

要素の水平方向の中央揃えを実現する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の作成と操作の学習

推薦する

dockerコンテナにvimをインストールするソリューション

目次物語の始まりvimをインストールし、hadoop-hive.envを編集します。不注意で回避しま...

MySQL XA で分散トランザクションを実装する方法

目次序文XA プロトコルMySQL XA で分散トランザクションを実装する方法序文MySQL が単一...

nginx 設定チュートリアルにおける add_header の落とし穴の詳細な説明

序文add_header は、headers モジュールで定義されたディレクティブです。名前が示すよ...

npm 淘宝ミラー変更説明

1. トップレベルの使用法1. cnpmをインストールする npm i -g cnpm --regi...

AWS無料サーバーアプリケーションとネットワークプロキシ設定チュートリアルの詳細な説明

目次予防必要条件AWSアカウントを申請する仮想マシンの申請と有効化仮想マシンを申請するセキュリティグ...

Javascript実践におけるコマンドモードの詳しい説明

目次意味構造例カスタムショートカットキー元に戻すとやり直し録音と再生マクロ要約する意味リクエストをオ...

Linuxシステムの入出力管理とvimの共通機能の詳細な説明

####システム内の入出力の管理#### 1. システムの入力と出力のリダイレクトを理解する入力リダ...

HTML タグのセマンティクス化 (H5 を含む)

導入HTML は、Web ドキュメントのコンテンツのコンテキスト構造と意味を提供します。HTML 自...

MySQL での coalesce() の使用に関するヒントのまとめ

序文最近、偶然 MySQL の coalesce を発見しました。ちょうど時間があったので、MySQ...

パゴダパネルとドッカーを使用して Gogs をインストールするプロセス全体

目次1 Baota Software StoreにDockerをインストールする2 ゴグスイメージを...

ユーザーエクスペリエンスの概要

最近では、ソフトウェアやウェブサイトのいずれの作業であっても、設計時に「ユーザー エクスペリエンス」...

Vue ElementUI で Excel ファイルを手動でサーバーにアップロードする方法の詳細な説明

目次概要プロパティ設定処理ロジック概要具体的な需要シナリオは次のとおりです。 Excel ファイルを...

MySQLとRedisでセカンダリキャッシュを実装する方法の詳細な説明

Redis の紹介Redis は完全にオープンソースで無料であり、BSD プロトコルに準拠しており、...

react+antdプロジェクトをゼロから構築する方法を教えます

これまでの記事はすべて私自身の学習記録であり、主に以前に遭遇した落とし穴を忘れないようにするためのも...