CSS 要素を垂直方向に中央揃えにする-CSSチュートリアル-php.cn

CSS 要素を垂直方向に中央揃えにする

autoload

リリース： 2021-04-15 13:59:41

オリジナル

1704 人が閲覧しました

CSS 要素を垂直方向に中央揃えにする

CSS に関する厄介な問題は、垂直方向の中央揃えです。垂直方向のセンタリングを実現するにはいくつかの方法がありますが、それぞれの方法には一定の制限があるため、実際のビジネスシナリオに応じて垂直方向のセンタリングを使用できます。

1. コンテナ内のコンテンツは 1 行のテキストのみです

<!DOCTYPE html>
<html>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    div {
      height: 60px;
      background-color: #1888fa;
      color: white;
    }
    span {
      line-height: 60px;/* 设置一个大的行高，让它等于理想的容器高度。
      这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素，可以设置为inline-block。 */
    }
  </style>
  <body>
    <div>
      <span>测试</span>
    </div>
  </body>
</html>

ログイン後にコピー

2. コンテナは自然な高さです

CSS での最も単純な垂直方向の中央揃え方法は、コンテナに上下のパディングを均等に与え、コンテナとコンテンツが独自の高さを決定できるようにすることです。以下の例を参照してください。この例では、padding-top と padding-bottom を同じ値に設定することで、親コンテナー内のコンテンツを垂直方向の中央に配置します。

<!DOCTYPE html>
<html>
   <style>
      * {
        padding: 0;
        margin: 0;
      }
      div {
        padding-top: 20px;  
        padding-bottom: 20px;
        background-color: #1888FA;
        color: white;
      }
    </style>
    <body>
      <div>
         <span>测试</span>
      </div>
    </body>
</html>

ログイン後にコピー

3. FlexBox を使用する

<!DOCTYPE html>
<html>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    div {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #1888fa;
      color: white;
    }
  </style>
  <body>
    <div>
      <span>测试</span>
    </div>
  </body>
</html>

ログイン後にコピー

推奨: 「2021 CSS 面接の質問まとめ (最新) 》

以上がCSS 要素を垂直方向に中央揃えにするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。