ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS の Div 内のテキストを垂直方向の中央に配置するにはどうすればよいですか?

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

Patricia Arquette
リリース: 2024-12-17 22:37:10
オリジナル
975 人が閲覧しました

How Can I Vertically Center Text Within a Div in CSS?

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

CSS では、特に分割内に複数の要素が存在する場合、div 内でテキストを垂直方向に配置するのが難しい場合があります。これは、行数や画像の存在に関係なく、コンテナ内のテキストを垂直方向の中央に配置する解決策です。

解決策:

div の高さを設定することによってline-height プロパティを使用すると、テキストが垂直になるようにすることができます。

コード:

div {
  height: 200px;
  line-height: 200px; /* Define this value to align the text vertically */
}
ログイン後にコピー

例:

<div>vertically centered text</div>
ログイン後にコピー

追加メモ:

  • この方法は単一行で機能しますtext。
  • 複数行のテキストを整列するには、追加のスタイルを使用するか、フレックスボックスまたはグリッド レイアウトの使用を検討してください。
  • div 内に画像やその他の要素が存在する場合は、行の調整が必要になる場合があります。 -height 値を使用するか、より高度な CSS テクニックを使用して適切な配置を確保します。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート