1. ホーム
  2. html

[解決済み] CSSでテキストを垂直方向にセンタリングするには?[重複しています]

2022-03-18 07:33:34

質問

私の場合は <div> 要素の内容を整列させたいと思います。 <div> 縦中央

以下は私の <div> のスタイルになります。

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

この目標を達成するための最適な方法は何でしょうか?

どのように解決するのですか?

この基本的な方法を試してみてはいかがでしょうか。

div {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

ただし、行の高さを含む box 要素と同じ高さに設定しているため、1 行のテキストに対してのみ機能します。


より汎用性の高い方法

これもテキストを縦に揃える方法です。この方法は、1 行のテキストにも複数行のテキストにも対応しますが、高さを固定したコンテナが必要です。

div {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Hello World!</span>
</div>

CSSは、単に <div> を、縦方向に中央揃えで配置します。 <span> を設定することで <div> のラインハイトをその高さと同じにし、さらに <span> を持つインラインブロックです。 vertical-align: middle . そして、行高を通常の <span> そのため、その内容はブロックの中で自然に流れます。


テーブル表示のシミュレーション

そして、もう一つのオプションは、古いバージョンでは動作しないかもしれません。 をサポートしていないブラウザでは display: tabledisplay: table-cell (基本的にInternet Explorer 7だけ)。CSS を使ってテーブルの動作をシミュレートし(テーブルは垂直方向の配置をサポートしているので)、HTML は 2 番目の例と同じになります。

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Hello World!</span>
</div>


絶対位置の使用

このテクニックは、top, bottom, left, rightを0に設定した絶対位置の要素を使用します。詳細は、Smashing Magazineの記事で説明されています。 CSSによる絶対的な水平・垂直方向の中央揃え .

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100%;
  border: 2px dashed #f69c55;
}
<div>
  <span>Hello World!</span>
</div>