CSSで全体のセンタリングを設定する方法

下次还敢
リリース: 2024-04-25 12:39:15
オリジナル
853 人が閲覧しました

CSS を使用して全体の中央揃えを実現します。垂直方向の中央揃えには align-item: center を設定します。水平方向の中央揃えには justify-content: center を設定します。 align-items プロパティと justify-content プロパティを一緒に設定すると、項目全体が中央に配置されます。

CSSで全体のセンタリングを設定する方法

CSS を使用して全体の中央揃えを設定する方法

Web デザインでは、すべてのコンテンツを中央揃えにする必要がある場合があります。これは、CSS の align-items プロパティと justify-content プロパティを使用して実現できます。

align-items プロパティ

align-items プロパティは、コンテナ内の項目 (フレックス項目) の垂直方向の配置を設定するために使用されます。 align-items が center に設定されている場合、項目は垂直方向に中央揃えになります:

<code class="css">.container {
  display: flex;
  align-items: center;
}</code>
ログイン後にコピー

justify-content プロパティ

justify-content プロパティは、コンテナ内の項目 (フレックス項目) の水平方向の配置を設定するために使用されます。 justify-content を center に設定すると、項目は水平方向に中央揃えになります:

<code class="css">.container {
  display: flex;
  justify-content: center;
}</code>
ログイン後にコピー

全体を中央揃えにする

全体を中央揃えにするには、align-items プロパティと justify-content プロパティの両方を設定する必要があります:

<code class="css">.container {
  display: flex;
  align-items: center;
  justify-content: center;
}</code>
ログイン後にコピー

Example

次の例は、CSS を使用してすべてのコンテンツを Web ページの中央に配置する方法を示しています。

以上がCSSで全体のセンタリングを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート