ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSを使って中央揃えレイアウトを実現する方法（コードコード）
CSSを使って中央揃えレイアウトを実現する方法（コードコード）
- PHPzオリジナル
- 2023-04-23 16:42:27746ブラウズ
Web デザインでは、センタリングは非常に一般的なレイアウト方法です。現在、多くの Web デザインではユーザー エクスペリエンスを向上させるために中央レイアウトが使用されており、CSS 中心の実装も非常にシンプルかつ重要です。
フロントエンド開発で CSS コードを使用して中央揃えのレイアウトを実現する方法について説明します。
センタリングの基本概念
センタリング CSS コードの学習を始める前に、まずいくつかの基本概念を理解する必要があります。
- 水平方向の中央揃え: 水平方向が中央揃えになります。通常、テキスト ボックスやボタンなど、ページ要素の幅が 100% ではない場合に適用されます。
- 垂直方向の中央揃え: 垂直方向は中央揃えで、通常は 1 行のテキストや画像など、ページ要素の高さが 100% ではない場合に適用されます。
- 水平方向と垂直方向の中央揃え: 水平方向と垂直方向の両方を同時に中央揃えにします。
水平方向の中央揃え
水平方向の中央揃えレイアウトを実現するには多くの方法がありますが、その本質は、要素の左右の余白を均等にすることです。
- text-align
これは最も一般的に使用される方法で、親要素がブロックレベルの要素 (たとえば、 div) であり、インライン要素 (テキストなど) のプロパティを設定します。
父元素 {
text-align: center;
}
子元素 {
display: inline-block;
}
このメソッドでは、位置合わせを行うために子要素を inline-block に設定する必要があります。そうでない場合は、margin メソッドを使用する必要があります。
- margin
この方法も一般的に使用されており、親要素と子要素の両方がブロック レベルの要素である場合に適しています。子要素の幅は固定です。左右のマージンを自動に設定すると、両側のマージンが均等になり、要素が中央に配置されます。
父元素 {
width: 60%;
}
子元素 {
width: 80%;
margin: 0 auto;
}
このレイアウト方法では、親要素が幅を設定する必要があることに注意してください。そうしないと、子要素を整列させることができません。
- flex
レイアウトでフレックスボックスを使用している場合は、次の CSS コードを使用して要素を水平方向の中央に配置できます。
父元素 {
display: flex;
justify-content: center;
}
上記のコードは、子要素を x 軸方向の中央に配置します。
- grid
グリッド レイアウトを使用する場合は、次の CSS スタイルを使用して要素を水平に配置できます。以下の概要に示すように、
父元素 {
display: grid;
place-items: center;
}
place-items プロパティは、子要素を水平方向と垂直方向の両方に整列させることができます。
垂直方向のセンタリング
垂直方向のセンタリング レイアウトを実装する方法も多数あります。ここではいくつかの方法を紹介します。
- line-height
これは非常にシンプルで一般的に使用される方法で、単一行のテキストや画像に適しています。親要素と子要素に同じ行の高さの値を設定することで、垂直方向の配置を実現できます。
父元素 {
line-height: 100px;
}
子元素 {
line-height: 100px;
}
ここで、親要素の高さは子要素の整数倍でなければならないことに注意してください。
- absolute
このメソッドは、子要素の位置属性を絶対に設定し、上と下を使用して位置を揃えます。
父元素 {
position: relative;
height: 200px;
}
子元素 {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
このメソッドは、コンテナの高さが固定されており、子要素の高さが不明な場合に適しています。
- flex
この方法では、コンテナのフレックスボックス レイアウトを使用し、次に align-items と # を使用する必要があります。 ## justify-content プロパティは、子要素を垂直方向と水平方向の中央に配置します。
父元素 {
display: flex;
align-items: center;
justify-content: center;
}上記のコードは、子要素を y 軸方向の中央に配置します。 水平方向と垂直方向の中央揃え要素を水平方向と垂直方向に整列させたい場合は、2 つ以上の方法を組み合わせて実現できます。 次のコードは、水平方向および垂直方向の中央揃えのレイアウトを実装します。
父元素 {
display: flex;
align-items: center;
justify-content: center;
}上記のコードは、子要素を x 座標軸と y 座標軸の中央に配置します。 概要フロントエンド デザインでは、中央揃えのレイアウトを実現することが非常に重要な部分です。この記事が、中央に配置されたコードがどのように実装されるかをよりよく理解するのに役立つことを願っています。 text-align、margin、flex、grid、absolute などの方法を使用すると、要素を水平方向と垂直方向の両方に位置合わせして中央揃えにすることができます。これらのメソッドとプロパティを使用すると、優れた UI デザインの Web ページを簡単に作成できます。 以上がCSSを使って中央揃えレイアウトを実現する方法（コードコード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。