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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

autoload

Apr 06, 2021 pm 04:04 PM

css垂直方向に中央揃え

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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

「ポッドキャストにサブスクライブ」リンクはどこにすべきですか？Apr 16, 2025 pm 12:04 PM

しばらくの間、iTunesはポッドキャストの大きな犬だったので、「ポッドキャストにサブスクライブ」をリンクした場合：

ブラウザエンジンの多様性Apr 16, 2025 pm 12:02 PM

彼らが2013年にChromeに行ったとき、私たちはオペラを失いました。今年初めにChromeになったとき、Edgeと同じ取引。マイク・テイラーはこれらの変更を「減少させて」と呼びました

Web共有に関するUXの考慮事項Apr 16, 2025 am 11:59 AM

Trashy ClickBaitサイトから出版物の最大の8月まで、共有ボタンは長い間ウェブ全体でユビキタスでした。それでも、これらは議論の余地があります

毎週のプラットフォームニュース：AppleはWebコンポーネント、プログレッシブHTMLレンダリング、自己ホストの重要なリソースを展開していますApr 16, 2025 am 11:55 AM

今週のラウンドアップでは、AppleはWebコンポーネント、InstagramがどのようにInsta-Loadingスクリプトであるか、自己ホストの重要なリソースのための考えのための食べ物に入ります。

git pathspecsとそれらの使用方法Apr 16, 2025 am 11:53 AM

gitコマンドのドキュメントを調べていたとき、それらの多くが選択肢があることに気付きました。私は当初、これはただのものだと思っていました

製品画像のカラーピッカーApr 16, 2025 am 11:49 AM

難しい問題のように聞こえます。私たちはしばしば、何千もの色で製品ショットを持っていないので、withをひっくり返すことができます。私たちもそうしません

ReactとThemeproviderを使用した暗いモードの切り替えApr 16, 2025 am 11:46 AM

ウェブサイトにダークモードオプションがあるときが好きです。ダークモードにより、ウェブページが読みやすくなり、目がリラックスしているように感じます。を含む多くのウェブサイト

HTMLダイアログ要素を使用したいくつかの実践Apr 16, 2025 am 11:33 AM

これは私が初めてHTML要素を見ていることです。私はしばらくの間それを知っていましたが、まだスピンしていませんでした。かなりクールです

See all articles

ホットAIツール

ホットツール

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、