divテキストを垂直方向に中央揃えにする方法は何ですか? divテキストを縦方向中央揃えにする方法の紹介

垂直方向のセンタリングは、フロントエンドレイアウトで非常に一般的な方法です。次の記事では、div テキストの垂直方向のセンタリングの実装方法を紹介します。

まず、テキストの水平方向の中央揃えは比較的単純であることを知っておく必要があります。行レベル要素は親要素のテキスト位置揃えの中心を設定し、ブロックレベル要素は独自の左右のマージンを設定します。自動。ただし、div テキストの垂直方向の中央揃えはそれほど単純ではないため、div テキストの垂直方向の中央揃えの実装方法をいくつか詳しく見てみましょう。

1.vertical-align 属性を使用すると、テキストを中央に配置できます。よく使用されるのは、中央、下、テキストです。 -bottom など。ただし、実際の使用法では、この属性が「機能する場合もあれば機能しない場合もある」ことがあり、この属性を追加した後でも、img やファイルに変更が見られないことがあります。文章。これは、vertical-align が inline-block や inline、および table-cell などの要素内でのみ機能するためです。

例:

<div style="vertical-align: middle;display: table-cell;">
    <img src="02.jpg" alt="">
    <p>文本居中</p></div>

2. line-height を使用してテキストを垂直方向に中央揃えにします

1 行または数行のみを垂直方向に中央揃えにしたい場合テキストの場合、最も簡単に作成できます。テキストの行の高さをコンテナの高さと同じにするだけです。

例:

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

3. パディングを使用してテキストを垂直方向に中央揃えにします

パディングを使用してテキストを垂直方向に中央揃えにすることは、次のようになります。行の高さを使用してテキストを垂直方向に中央揃えにすることは、1 行または複数行のテキストを垂直方向に中央揃えにするのにも適しています。

例:

p { padding:20px 0; }

4. CSS3 変換を使用してテキストを垂直方向に中央揃えにします

例:

.center-vertical{
  position: relative;
  top:50%;
  transform:translateY(-50%);
}.center-horizontal{
  position: relative;
  left:50%;
  transform:translateX(-50%); 
}

5.フレックス レイアウトを使用して、テキストの垂直方向の中央揃えを実現します。

例:

.flex{    /*flex 布局*/
    display: flex;    /*实现垂直居中*/
    align-items: center;    /*实现水平居中*/
    justify-content: center;
    
    text-align: justify;
    width:200px;
    height:200px;
    background: #000;
    margin:0 auto;
    color:#fff;
}

この記事は、上記のコードで使用されているさまざまな関数について詳しく学びたいと思います。属性については、PHP 中国語 Web サイトの

css ユーザー マニュアル

および

css3 学習マニュアル を参照してください。 ！ ！

以上がdivテキストを垂直方向に中央揃えにする方法は何ですか? divテキストを縦方向中央揃えにする方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。