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

推薦する

nginxでイメージサーバーを構築する手順の詳しい説明(ルートとエイリアスの違い)

インストール手順は省略します( yum -y install nginx;を使用して直接インストール...

HTML テーブルタグチュートリアル (26): セルタグ

<TD> タグの属性は、テーブル内のセルのプロパティを設定するために使用されます。表 &...

有名ウェブサイトのロゴにおすすめのフォント40選

世界で最も有名なウェブサイトのロゴデザインにはどんなフォントが使われているかご存知ですか?これらのフ...

jsonファイルの書き方の詳細説明

目次JSONとはなぜこの技術なのでしょうか? JSONの使い方- データ形式- メモ- JSには2つ...

JavaScript継承のさまざまな方法とメリット・デメリットを詳しく解説

目次1. プロトタイプチェーン継承2. コンストラクタの借用(古典的な継承) 3. 組み合わせ継承4...

MySql8.0以降のバージョンでROOTパスワードを正しく変更する方法

展開環境:インストールバージョン Red Hat Cent 7.0 MYSQL バージョン 8.0....

Expressはログイン認証を実装

この記事では、ログイン認証を実装するためのExpressの具体的なコードを例として紹介します。具体的...

React 関数コンポーネントのパフォーマンス最適化のアイデアの詳細な説明

最適化のアイデア最適化には主に 2 つの方向があります。再レンダリングの回数を減らします。 Reac...

Vue マルチページ構成の詳細

目次1. 複数ページの違い2. SPAとMPA 3. Vue Cli スキャフォールディング構成1....

node.js グローバル変数の具体的な使用法

グローバルオブジェクトすべてのモジュールは呼び出すことができますglobal: ブラウザの wind...

vue-video-player でのブレークポイント再開の実装

最近のプロジェクトでは、ブレークポイントからビデオの再生を再開する機能を実装する必要がありました。こ...

少なくとも7日間連続して注文を行ったユーザーに対するSQLクエリ

テーブルを作成するテーブル order(id varchar(10),date datetime,o...

HTTPプロトコルにおけるステータスコードの意味

暫定的な応答を示し、要求者に操作の続行を要求するステータス コード。コードの説明100 (続行) リ...

シームレスなトークンリフレッシュを実現する方法

目次1. 需要方法1方法2方法3 2. 実装3. 問題解決質問1: トークンの複数回の更新を防ぐ方法...

Bootstrap 3.0 学習ノートボタンスタイル

この記事では主にボタンのスタイルについて説明します。 1. オプション2. サイズ3. 活動状況4....