Div 要素内のテキストを垂直方向の中央に配置するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-12-23 18:22:14

オリジナル

288 人が閲覧しました

How to Vertically Center Text within a Div Element?

の垂直方向の配置要素

の中央でテキストを垂直方向に配置します。特定の要素の高さを維持しながら、複数の方法が利用可能です。

Line-Height を使用する

#abc {
  line-height: 50px;
}

ログイン後にコピー

単一行のテキストを垂直方向に中央揃えにするには、目的の高さに等しい行の高さを適用します。次の CSS で示されている要素の高さ:

ディスプレイの使用プロパティ

#abc {
  display: table;
  width: 100%;
}

#abc span {
  vertical-align: middle;
  display: table-cell;
}

ログイン後にコピー

複数行のテキストの場合、テキストをで囲みます。そして、display: table; を適用します。そして表示: テーブルセル;垂直整列: 中央; とともに次のように:

Transform プロパティの使用

#abc {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

ログイン後にコピー

より高度な位置合わせについては、translateY() でのtransform プロパティの使用を検討してください:

変換位置を指定するには、要素に相対または絶対などの定義された位置があることを確認してください。有効になります。

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

ソース：php.cn

このウェブサイトの声明

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

著者別の最新記事