HTML CSS コーディング

【CSS】横の中央揃えの指定

2022年5月2日

今回は、CSSで要素を左右中央に寄せるやり方をまとめました。

実際のコーディングでも頻繁に出てくる部分ですのでしっかりと抑えおきましょう。

text-align:center

  text-align: center;

インライン要素であるテキストや画像は、親のブロック要素に指定すると中央寄せになります。
※text-align:centerは子要素にも継承されます。

See the Pen 左右中央揃え by morikuma (@morikuma) on CodePen.

margin: 0 auto

margin: 0 auto;

横幅の指定されたブロック要素を中央寄せするときに設定します。
marginのautoとは、その要素に余った余白に対して距離を開けます。

例えばmargin-left:auto;を指定すると、以下のように「左」に余白を開けます。
オレンジの部分がmarginの余白です。

次はmargin-right:auto;のときは、以下のように「右」に余白を開けます。

これを利用して左右の余白に対してautoの値を設定すると、
両側に対して均等に余白を開けることとなり左右中央に配置されます。

See the Pen Untitled by morikuma (@morikuma) on CodePen.

またmargin: 0 auto; はショートハンドの書き方になるため、
以下の記述でも同じ動きとなります。

margin-left: auto;
margin-right: auto;

marginのショートハンドについてより詳しく知りたい方についてはこちらから

margin-inline

  margin-inline:auto;

margin-inlineという論理プロパティを使って左右中央に調整します。

論理プロパティとは、書体の方向(インライン方向)に従って
先頭と末尾の余白を調整するプロパティです。
例：英語は左から右。アラビア語は右から左。日本語は上から下。

boxクラスにmargin-inline:autoを指定して左右真ん中に指定します。

See the Pen 左右中央揃え margin-inline by morikuma (@morikuma) on CodePen.

margin-inlineについてより詳しく知りたい方についてはこちらから

 

flexbox

display: flex;
justify-content: center;

flexboxを使用して中央寄せを指定することができます。
こちらは親のブロック要素contentクラスに指定することにより、
子要素が中央寄せとなります。

See the Pen flex by morikuma (@morikuma) on CodePen.

grid

display: grid;
place-items: center;

girdを使用して中央寄せを指定することができます。
こちらも親のブロック要素contentクラスに指定することにより
子要素が中央寄せとなります。

See the Pen grid by morikuma (@morikuma) on CodePen.

transform

transformを用いて横の中央に指定することができます。
leftとtransformプロパティの指定は以下をイメージしてみると分かりやすいです。
left:50%で左辺を真ん中にして、transform: translateX(-50%);でブロックの半分を左に引き戻して横の中央に配置しています。

.content {
  position: relative;
}
.box {
  position: absolute;
  content: "";
  left: 50%;
  transform: translate(-50%);
}

See the Pen transform by morikuma (@morikuma) on CodePen.

まとめ

横の中央揃えも多数の方法がありますので
デザインによって適切に指定できればと思います。

【CSS】縦の中央揃えの指定の仕方についてはこちら

【CSS】上下左右中央揃えの指定の仕方についてはこちら

-HTML CSS, コーディング