本記事では、初心者の方でも分かるように丁寧に解説いたします。
テキストなどの要素を上下左右中央寄せする方法はいくつかあります。
その時の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>さいごに
最後までご購読いただきありがとうございました。
ほかにも解説して欲しい内容がございましたら、コメントよりお待ちしております。
