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 am 11:19 AM

先週末、Web UnleashedでJamstack Roundtableディスカッションを開催しました。その経験からのいくつかのランダムなメモ。

Githubテンプレートリポジトリを使用して、静的サイトプロジェクトをジャンプしますApr 16, 2025 am 11:14 AM

静的サイトジェネレーターを始めた場合は、GitHub Templateリポジトリを使用して新しいプロジェクトを迅速に開始して削減できることをご存知ですか？

静的ファースト：サーバーレスレンダリングを備えた事前に生成されたジャムスタックサイトApr 16, 2025 am 11:06 AM

Jamstackという用語がますます頻繁に現れるのを見るかもしれません。私はしばらくの間、アプローチとしてそれのファンでした。

CSS-Tricks Chronicle XXXVIApr 16, 2025 am 10:58 AM

これは、私、このサイト、およびCSS-Tricksファミリーの一部である他のサイトで起こっているこれらの小さなまとめの1つです。

毎週のプラットフォームニュース：絵文字文字列の長さ、丸いボタンの問題、バンドルされた交換Apr 16, 2025 am 10:46 AM

今週のラウンドアップでは、2つの絵文字の文字列の長さが必ずしも等しくなく、その丸いボタンを作成する前に検討すべきものがあり、新しいものがあるかもしれません

カクテルミキサーでGraphQLに会うApr 16, 2025 am 10:43 AM

GraphQLとRESTは、Webサイトを使用するためにAPIを構築するときに使用される2つの仕様です。 RESTは、アプリケーションが使用する一連の一意の識別子（URL）を定義します

SASSモジュールの導入Apr 16, 2025 am 10:42 AM

SASSは、他の言語（モジュールシステム）から認識される可能性のある主要な新機能を起動しました。これは@Importにとって大きな前進です。最も使用されているものの1つ

心配をやめ、gitフックが大好きであることを学んだ方法Apr 16, 2025 am 10:41 AM

バージョン制御システムとしてのGITのメリットは争うのが困難ですが、Gitはあなたとあなたのコミットを追跡するために素晴らしい仕事をしますが

See all articles

ホットAIツール

ホットツール

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

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。