犬の手も借りたいあなたに最適な記事を届けます

CSS 上下左右から中央寄せする方法 【初心者向け完全攻略版】

本記事では、初心者の方でも分かるように丁寧に解説いたします。

テキストなどの要素を上下左右中央寄せする方法はいくつかあります。

その時のHTMLの構成、どの要素を中央寄せしたいかなどによって異なります。

しかし、以下の方法のどれかであなたの望む中央寄せが実現できますので、試してください。

左右中央寄せ

text-align : center ;

こちらは左右からテキストを中央に寄せたいときに使用します。

次のようなHTMLの場合で解説します。

以下のように、pタグの中の文字を中央寄せにしたい場合は

before

<p>テキスト</p>

テキスト

中央寄せしたい要素であるpタグに「textt-align : center」を指定します。

after

<p style="text-aligm:center;">テキスト</p>

テキスト

このように要素を中央寄せすることができます。

margin : 0 auto ;

こちらはテキストではなく領域を中央寄せするときに使います。

以下のように黒枠の中にある赤枠を中央に寄せたい場合は「margin: 0 auto」を指定します。

before

<div>

  <div>領域(赤枠)</div>

</div>
領域(赤枠)

after

<div>

  <div style="margin: 0 auto;">領域(赤枠)</div>

</div>
領域(赤枠)

justify-content : center ;

こちらも領域を左右から中央寄せする時に使用します。

しかし、これを使用するにはいくつかの注意点があります。

①親要素にdisplay:flexを指定すること

②親要素にjustify-content : center指定すること

以下のように赤枠を中央寄せしたい場合には、その親要素に「display;flex」と「justify-content:center」を指定しますす。

before

<div>

 <div>領域(赤枠)</div>

</div>
領域(赤枠)

after

<div style="display:flex; justify-content:center;">

 <div>領域(赤枠)</div>

</div>
領域(赤枠)

上下中央寄せ

align-items : center ;

こちらは領域を上下中央寄せしたい場合に使用します。

注意点

①親要素にdisplay:flexを指定すること

②親要素にalign-items:center;指定すること

以下のように黒枠を基準に赤枠を上下中央寄せしたい場合は、このように指定します。

before

<div>

<div>領域(赤枠)</div>

</div>
領域(赤枠)

after

<div style="display:flex; align-items:center;">

 <div>領域(赤枠)</div>

</div>
領域(赤枠)

vertical-align : middle ;

こちらは領域やテーブルを上下中央寄せするときに使用します。

注意点

①display : inline であること

②display : inline-block であること

③テーブルであること

以下のように指定します

before

<p>ブロック<span>インライン</span></p>

ブロックインライン

after

このように並列して並んだ要素を上下中央寄せすらことができます

少しわかりにくいかもしれませんが、「ブロック」という文字に対して「インライン」という文字が上下中央に配置されていることがわかります。

<p>ブロック<span style="display:inline; vertical-align:middle;">インライン</span></p>

ブロックインライン

スポンサーリンク

上下左右中央寄せ

最後になりますが、今までのcssを組み合わせることで、上下左右好きなように中央寄せすることが出来ます。

before

<div>

<div>領域(赤枠)</div>

</div>
領域(赤枠)

after

<div style="display:flex; justify-content:center; align-items:center;">

 <div>領域(赤枠)</div>

</div>
領域(赤枠)

さいごに

最後までご購読いただきありがとうございました。

ほかにも解説して欲しい内容がございましたら、コメントよりお待ちしております。