とほほのセンタリング入門

• トップ
• センタリング

• はじめに
• テキストを左右にセンタリングする
• ブロックを左右にセンタリングする
• 複数のテキストやブロックを左右にセンタリングする
• 複数のテキストやブロックを上下にセンタリングする
• 複数のテキストやブロックを上下左右にセンタリングする

はじめに

要素をセンタリング(中央揃え・中央寄せ)するのは以外に難しく、テキストとブロック要素で方法が異なったり、複数の要素があるとうまくセンタリングできなかったりと、悩まされます。最近は Internet Explorer の利用がほぼ減ってきたので、グリッドを用いて比較的簡単にセンタリングする方法について説明します。グリッドをあまり使用しない古い記事は こちら にあります。

テキストを左右にセンタリングする

テキストを左右にセンタリングするには text-align に center を指定します。

.text-horizontal-center {
  text-align: center;
}

<div class="text-horizontal-center">
  Short text.<br>
  This is long long long long text.
</div>

ブロックを左右にセンタリングする

ブロックを左右にセンタリングするには、子要素に対して margin-right と margin-left に auto を指定します。この時、子要素には横幅(width) を指定しておく必要があります。

.block-horizontal-center > * {
  margin-right: auto;
  margin-left: auto;
}
.short-block { width: 8rem; }
.long-block { width: 16rem; }

<div class="block-horizontal-center">
  <div class="short-block">Short block</div>
  <div class="long-block">This is long long long long block</div>
</div>

複数のテキストやブロックを左右にセンタリングする

複数のテキストやブロックを縦方向に並べながらセンタリングしたい場合は親要素を グリッドコンテナ として、justify-items に center、align-content に start を指定します。<img> などのインラインブロックを横にならべたい時はインラインブロックを <div>～</div> で囲みます。

.horizontal-center {
  display: grid;
  justify-items: center;
  align-content: start;
}

<div class="horizontal-center" style="height:12rem">
  Short text.<br>
  This is long long long long text.
  <div class="short-block">Short block</div>
  <div class="long-block">Multiline<br>long long long long long block.</div>
  <div>
    <img src="./image/sample.png" alt="Sample">
    <img src="./image/sample.png" alt="Sample">
  </div>
</div>

Short text.
This is long long long long text.

Short block

Multiline
long long long long long block.

複数のテキストやブロックを上下にセンタリングする

上下にセンタリングしたい場合は justify-items に start、align-content に center を指定します。<img> などのインラインブロックを横にならべたい時はインラインブロックを <div>～</div> で囲みます。justify-items: start は省略可能です。

.vertical-center {
  display: grid;
  justify-items: start;
  align-content: center;
}

<div class="vertical-center" style="height:12rem">
  Short text.<br>
  This is long long long long text.
  <div class="short-block">Short block</div>
  <div class="long-block">Multiline<br>long long long long long block.</div>
  <div>
    <img src="./image/sample" alt="Sample">
    <img src="./image/sample" alt="Sample">
  </div>
</div>

Short text.
This is long long long long text.

Short block

Multiline
long long long long long block.

複数のテキストやブロックを上下左右にセンタリングする

上下にセンタリングしたい場合は justify-items にも align-content にも center を指定します。<img> などのインラインブロックを横にならべたい時はインラインブロックを <div>～</div> で囲みます。

.horizontal-vertical-center {
  display: grid;
  justify-items: center;
  align-content: center;
}

<div class="horizontal-vertical-center" style="height:12rem">
  Short text.<br>
  This is long long long long text.
  <div class="short-block">Short block</div>
  <div class="long-block">Multiline<br>long long long long long block.</div>
  <div>
    <img src="./image/sample" alt="Sample">
    <img src="./image/sample" alt="Sample">
  </div>
</div>

Short text.
This is long long long long text.

Short block

Multiline
long long long long long block.