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

Web 開発では、多くの場合、

内でテキストを垂直に配置する必要があります。ディビジョン>要素。これを実現するには、いくつかの解決策が利用可能です。

Line-Height の使用:

簡単な方法の 1 つは、line-height プロパティを使用することです。 line-height を

の高さと同じ値に設定すると、テキストは自動的に垂直方向の中央に配置されます。

例:

#abc {
  line-height: 50px;
}

注: このメソッドは、テキスト内に 1 行のテキストがある場合にのみ機能します。

.

Display: Table と Display: Table-Cell:

の使用 複数行のテキストの場合、より汎用性の高い解決策として、display: table を使用します。そして表示: テーブルセルのプロパティ。この方法では、テキストを で囲みます。

例:

#abc {
  display: table;
}

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

Transform プロパティの使用:

もう 1 つの方法は、translateY() 関数でtransform プロパティを使用することです。これには、要素の位置を絶対位置に設定し、上から 50% の位置に配置し、軸から -50% で移動することが含まれます。

例:

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

注: この方法は、IE8 などの古いブラウザではサポートされていない可能性があります。

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