Div内でテキストを垂直方向に中央揃えにする方法は?

Div 内のテキストを垂直方向に揃える方法

div を操作するとき、場合によっては、div 内のテキストが確実に揃えられるようにする必要があります。真ん中に縦方向に。これはさまざまな方法で実現できます。

line-height を使用する

div の高さが 50px など固定されている場合は、単純に line-height を使用できます。 CSS プロパティ。

#abc {
  height: 50px;
  line-height: 50px;
}

これにより、テキストが垂直方向の中央に配置されます。 div.

表示プロパティの使用

複数行のテキストの場合、span 要素で囲み、表示プロパティと垂直配置を適用できます。

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

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

transform プロパティの使用

別の方法これには、translateY() 関数でtransformプロパティを使用することが含まれます。これは、表示プロパティをサポートしていない古いブラウザで特に便利です。

#abc {
  position: relative;
}

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

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