Div 内でテキストを垂直方向の中央に配置するにはどうすればよいですか?

Div 内のテキストの垂直方向の配置

div 内のテキストを垂直方向の中央に配置できないことは、見た目の美しいレイアウトを作成する上で課題となる可能性があります。次の問題のあるシナリオと解決策は、この問題に対処します。

シナリオ:

提供された HTML と CSS は、「column-content」div 内のテキストを垂直方向の中央に配置できません。 margin-top とvertical-align を使用しようとしてもproperty.

解決策:

Andres Ilich の鋭い観察が、この問題を解決する鍵を提供します。テキストの量と div 内に他の要素があるかどうかに応じて、異なるアプローチが必要になる場合があります。

単一行のテキスト:

div の場合テキストが 1 行のみ含まれている場合は、次の CSS を適用できます:

div {
  height: 200px;
  line-height: 200px; /* Define this property to center the text vertically */
}

複数行のテキストまたはその他要素:

div に複数行のテキストまたはその他の要素が含まれている場合は、より包括的なアプローチが必要になる場合があります。 1 つのオプションは、レイアウトと配置をより詳細に制御できる CSS フレックスボックスまたはグリッドを使用することです。

以上がDiv 内でテキストを垂直方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。