「margin:0 auto;」「text-align:center;」flexboxで要素を左右中央に配置するcssの方法

要素を左右中央に配置するのに苦労することは有りませんか？

要素の構成に合わせた、margin:0 auto;　text-align:center;　flexboxの使い方を整理しました。

コーディングする時に迷わないように、親要素と小要素、ブロック要素とインライン要素の使い分けを明確にしました。

目次

1. 「margin:0 auto;」「text-align:center;」flexboxで要素を左右中央に配置するcssの方法
2. 「margin:0 auto;」使い方の基礎
3. 「text-align:center;」使い方の基礎
4. 「flexbox」使い方の基礎
5. ブロック要素、インライン要素

１．「margin:0 auto;」「text-align:center;」flexboxで要素を左右中央に配置するcssの方法

要素を左右の中央に配置するよく使う３つのCSSの方法です。

(1) margin:0 auto;

ブロック要素自体を左右中央に配置するときに、親要素に指定します。

(2) text-align:center;

ブロック要素の中の子要素（ブロック要素以外）を左右中央に配置するときに、親要素に指定します。

(3) flexbox を使う

flexboxとは、親要素：フレックスコンテナの中の子要素：フレックスアイテムを指定する方法です。

子要素を左右中央に配置するときに、親要素に、display:flex; と、justify-content:center; を指定します。

２．「margin:0 auto;」使い方の基礎

ブロック要素自体を、左右中央に配置する方法

    <div class="sample">
      sample
    </div>

.sample{
  background-color: yellow;
  border:2px solid black;
  height: 50px;
  width:50%;
  margin:0 auto;
}

結果

sampleクラスの黄色のボックスが、左右中央配置されています。

効かない時の確認事項

●「inline」「inline-block」の指定をしていないか？

●幅の指定をしているか？100%未満になっているか？

●positionやfloatで使用していないか？

３．「text-align:center;」使い方の基礎

ブロック要素内の子要素を、左右中央に配置する方法

    <div class="sample">
      sample
    </div>

.sample{
  background-color:yellow;
  border:2px solid black;
  height:50px;
  text-align: center;
}

結果

sampleという文字が、sampleクラスの黄色いボックス内で左右中央配置されています。

効かない時の確認事項

●親要素が、「inline」「inline-block」ではないか？

●text-align:center;を親要素で指定しているか？

●中央配置したい要素が、「block」になっていないか？

margin:0 auto;とtext-align:center;の組み合わせ

.sample{
  background-color: yellow;
  border:2px solid black;
  height: 50px;
  width:50%;
  margin:0 auto;
  text-align: center;
}

結果

sampleクラスの黄色のボックスが左右中央配置され、
sampleという文字が黄色のボックス内で左右中央配置されています。

４．「 flexbox 」使い方の基礎

” flexbox ” という方法

親要素の「フレックスコンテナ」の中の子要素の「フレックスアイテム」の位置を指定するやり方です。

  <div class="block">
    <div class="sample">
      sample
    </div>
  </div>

.block{
  display:flex;
  justify-content: center;
}
.sample{
  background-color: yellow;
  border:2px solid black;
  height: 50px;
  width:50%;
}

結果

子要素である黄色いボックスが左右中央配置されています。

効かない時の確認事項

●要素は「block」になっているか？

●親要素に指定しているか？

５．ブロック要素、インライン要素

「margin:0 auto;」「text-align:center;」flexboxでは、ブロック要素とインライン要素を指定するのが重要になります。

タグによりブロック要素とインライン要素に分類されます。
迷ったら、確認してください。

主なブロック要素

<div>、<p>、<h1>-<h6>、<form>、<ul>、<li>、<table>、<ol>、<address>、<dl>、<hr>など

主なインライン要素

<a>、<span>、<img>、<input>、<textarea>、<label>、<br>、<code>、<em>、<font>、<i>、<q>、<s>、<samp>、<select>、<small>、<strike>、<strong>、<sub>、<sup>、<tt>、<u>、<var>など

上下中央配置に興味がある方は、下記を参照ください。

「align-items:center;」「vertical-align:middle;」line-heightで要素を上下中央に配置するcssの方法

６．まとめ

HTML,CSSで、要素を左右中央配置する方法をまとめました。

「margin:0 auto;」「text-align:center;」「flexbox」はそれぞれ使い方に特徴があります。

特徴を理解して使って貰えれば幸いです。

＊最後まで読んでいただきありがとうございます。
　舌足らずで説明不足の所はお許しください。
　改良項目・修正項目がございましたらご指摘いただけたら幸いです。

Copyright – Seiji Nakamura, 2023 All Rights Reserved.