ホームページ > ウェブフロントエンド > CSSチュートリアル > divセンタリング用のCSSコード

divセンタリング用のCSSコード

下次还敢
リリース: 2024-04-25 14:24:17
オリジナル
575 人が閲覧しました

text-align: center を使用して、HTML で div を水平方向に中央揃えにします。垂直方向の中央揃えの手順は次のとおりです。 div の高さと垂直線の高さを設定します。コンテンツを垂直方向の中央に配置するには、margin: 0 auto を使用します。フレックスボックスまたはグリッド レイアウトを使用して中央揃えを行うこともできます。

divセンタリング用のCSSコード

Centered divのCSSコード

Centered div

HTMLでは、divはデフォルトでページの左側に水平に配置されるブロックレベルの要素です。中央揃えは CSS プロパティを使用して実現できます。

水平方向の中央揃え

text-align 属性を使用して、div のコンテンツを水平方向に中央揃えにします。 text-align属性可以水平居中div的内容。

<code class="css">div {
  text-align: center;
}</code>
ログイン後にコピー

垂直居中

垂直居中div的内容比较复杂,需要使用以下步骤:

  1. 设置div的高度和一个垂直线。
  2. 使用margin
    <code class="css">div {
      height: 200px;  /* 设置div的高度 */
      line-height: 200px;  /* 设置垂直线的高度 */
      margin: 0 auto;  /* 将内容垂直居中 */
    }</code>
    ログイン後にコピー
垂直中央揃え

垂直中央揃えの div の内容はより複雑で、次の手順が必要です:

  1. div の高さと垂直線を設定します。

  2. margin 属性を使用して、コンテンツを垂直方向の中央に配置します。

    <code class="css">div {
      display: flex;
      justify-content: center;
      align-items: center;
    }</code>
    ログイン後にコピー
    フレックスボックスを使用して中央に配置します

    フレックスボックスレイアウトを使用して div を中央に配置することもできます。 🎜
    <code class="css">div {
      display: grid;
      place-items: center;
    }</code>
    ログイン後にコピー
    🎜🎜グリッド レイアウトを使用して中央に配置します🎜🎜🎜グリッド レイアウトを使用して div を中央に配置することもできます。 🎜りー

以上がdivセンタリング用のCSSコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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