文章や写真などを左右中央にしたい時に使うmargin: 0 auto;とtext-align: center;の違いを紹介します。
See the Pen marginと𝐚𝐥𝐢𝐠𝐡𝐭 by 紗矢香藤本 (@zupshihe-the-encoder) on CodePen.
marginとtext-alignはbox内で動き方が違う
2つの違いは、以下の通りです。
- margin: 0 auto;は、<div>や<p>タグなどのdisplay: block;の性質を持つ要素を中央揃えにすることができる。
- text-align: center;は、display: block;の中身である、<a>や<img>などのdisplay: inline;の性質を持つ要素を中央揃えにすることができる。
2つ目のmargin: 0 auto;では、<p>全体が移動して、中央に動きます。
3つ目のtext-align: center;では、<p>内で移動し、中央に動きます。
inline要素を中央寄せしたいときの注意点
<div>や<p>などblock要素は、どちらでも真ん中に動きますが、<a>や<img>などinline要素を動かしたいときに注意が必要です。
inline要素を動かす方法は2つあります。
- inline要素を<div>など親要素で囲み、親要素にtext-align: center;を使用する。
- inline要素自体をdisplay: block;でblock要素にする。
4つ目のように、そのままinline要素である<a>にtext-align: center;を書いても反応がありません。
そのため、5つ目のように、親要素である<div>で囲んで、<div>にtext-align: center;を書くと、中央に動きます。
また、6つ目のように、<a>自体をdisplay: block;でblock要素に変えることで、直接<a>にtext-align: center;で中央に動かすことができます。
今回のように、<p>や<a>の横幅を指定した状態でtext-alignを書くと、その横幅内で中央に移動しますが、横幅を全体にしていると、boxに対して中央にすることができます。
使い分けられるようになろう
私は全体的に中央にしたいことが多いので、wrapperでまずmargin: 0 auto;にしておくことが多いです。
中のコンテンツなどで中央にしたい箇所があれば、text-align: center;を使うことが多いです。
画像である<img>はいつも<div>で囲うか、block要素にするか悩みがちです。flexなど横並びにするときなどは<div>で囲っている方が見やすいかなと思って囲ったりします。
他の人がみてもわかりやすいコードを書けるようになりたいですね。
