【HTML/CSS】中央寄せのやり方を紹介。inline要素とblock要素でやり方が違います。

2020年7月21日

「さて、要素を中央寄せにしたいからググるか・・・お、

text-align: center; 

と書けばいいのか。
よし、書こう！」

その後、彼のHTML要素は中央になりませんでした。

Game Over……

なんて経験をした方はたくさんいると思います。
ちなみに私もその内の一人。

たかだか中央寄せにするだけなんですが、
HTMLには意外と奥があったりします。

なぜ中央寄せにならないのか

結論から言うと

inline要素とblock要素でやり方が違います。

あなたの変えたい要素はどちらでしょうか？　

inline要素とblock要素

・inline要素

a
span
strong
br
strong
など。

一言で言うなら横に並んでいくタイプ。
改行が入らない。

寄せる方法は

margin: 0 auto; // 中央寄せ
margin: 0 0 0 auto; // 右寄せ
margin: 0 auto 0 0; // 左寄せ

・block要素

h1〜h6
p
hr
ul
ol
li
div
table
など。

一言で言うなら縦に並んでいくタイプ。
改行が入る。

text-align: center; // 中央寄せ
text-align: right; // 右寄せ
text-align: left; // 左寄せ

まとめ

inline要素とblock要素で中央寄せのやり方は変わってきます。

さらに注意点として
これら中央寄せなどの指定は「親要素」に指定してください。

<div class="nya-wan">
  <div class="kokoni-sitei">
    <a class="aaa" href="#about">About</a>
    <a class="aaa" href="#works">Works</a>
    <a class="aaa" href="#links">Links</a>
    <a class="aaa" href="#contact">Contact</a>
  </div>
</div>

上記<a>軍団を寄せたい場合は「kokoni-sitei」のタイミングで書く感じ。

以上、参考になれば幸いです。