☰

CSS でテキストを垂直方向に中央揃えにするにはどうすればいいですか? [重複] 質問する

tag-icon • tag-icon html css vertical-alignment
CSS でテキストを垂直方向に中央揃えにするにはどうすればいいですか? [重複] 質問する

テキストを含む要素があり<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>

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

ベストアンサー1

次の基本的なアプローチを試すことができます:

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

ただし、行の高さをボックス要素と同じ高さに設定しているため、これは 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: tableとdisplay: 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>

絶対位置指定の使用

このテクニックは、絶対位置要素を上下左右に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>

おすすめ記事