CSSで要素を中央寄せにする方法

要素を中央寄せにする方法をいくつか見ていきましょう。

左右に中央寄せする場合

1.text-align:center;

要素の中にあるテキストやインラインの子要素を中央寄せしたい場合に使います。

例1
<p>テキストを中央寄せしたい!</p>
p {
  text-align: center;
}

例1では、pタグの中のテキスト(テキストを中央寄せしたい!)を中央に寄せるため、text-align:center;を指定しています。

例2
<div>
  <img>
</div>
div {
  text-align: center;
}

例2では、インラインであるimgを中央寄せするために、親要素のdivにtext-align:center;を指定しています。

text-align:center;は、あくまで親要素の中央にテキストや子要素を配置するプロパティです。画面全体の中央に配置したい場合は、親要素の位置や幅を見直す必要があることもございます。

2.margin:0 auto;

ブロック要素を中央寄せしたい場合に使用します。

margin:0 auto;というのは「上下のmarginが0、左右のmarginがauto」という意味です。autoは左右の幅が均等になるようにmarginを設定してくれます。

marginについては以下の記事も参照。

ブロックとインラインについては以下の記事も参照。

3.Flexboxを使う

親要素に「display:flex;」「justify-content:center;」を指定します。

上下に中央寄せする場合

1.line-heightの値を親要素の高さと同じにする

line-heightは行間を指定するプロパティです。指定した値の中央にテキストが配置されるので、親要素と同じ高さを指定すれば、親要素の中央にテキストがきます。ただし2行以上のテキストには使えません。

2.Flexboxを使う

親要素に「display:flex;」「align-items:center;」を指定します。

Flexboxについては以下の記事も参照。

参考記事

CSSで中央寄せする9つの方法(縦・横にセンタリング)
【図解】HTML&CSSで縦・横・ど真ん中にセンタリングする方法を総まとめしました。また「中央寄せできない」というときの対処法も一覧にしています。
CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ
こんにちは。めぐたんです。 みなさんは「CSSで中央寄せする方法」といえば何が思いつくでしょうか?...
Flexboxで、要素の左右中央寄せ、均等割り、右寄せ(justyify-content)の方法|レンタルサーバーナレッジ
Flexboxを使い、要素の左右中央寄せ、均等割り、右寄せの方法をご紹介します。 ※ このドキュメントは2016年5月26日に勧告候補になったドキュメント「CSS Flexible Box Layou...
Flexboxで、要素の上下中央寄せ、均等割りの方法(align-items)|レンタルサーバーナレッジ
Flexboxを使い、要素の上下中央寄せ、均等割りの方法をご紹介します。 ※ このドキュメントは2016年5月26日に勧告候補になったドキュメント「CSS Flexible Box Layout Mo...

コメント

タイトルとURLをコピーしました