中央寄せにする3つのhtml、CSS

- Category - html
Pocket

  1. htmlにtextalign=”center”と記述。
    文章だけでなく、画像も中央配置が可能。
    ただ、本来は文章の中央配置のためのもの
  2. cssにdisplay: flex;
    justify-content: center;
    と記述。
    ただし、iPhoneで画像が縦長になってしまう場合がある。
  3. margin:0 auto; display:block;(もしくは、margin-left:auto; margin-right:auto; display:block;)
    天地のマージンを指定したくない場合にはかっこ内の方法を使用。
    画像やテキスト等、ブロック要素ではないものにはdisplay:blockで指定しないとならないので、他でdisplayを使っているならこの方法は使えない。
    またwidthでサイズ指定しても適用される(width:autoはダメ)

3つ目の方法についての補足。なんで、うまくいかないのか・・・
例えばサイトの横幅を1000pxとした場合、ブロック要素でない、pタグなどを配置する場合、横幅が100%(1000px)になってしまい、その中での左配置になってしまうので、中央配置は利いてないように見える。
これを中央配置にしたい要素の横幅を例えば500pxとすると、1000pxの中の500pxを中央配置となりうまくいくみたいです。
文字みたいに横幅を指定しづらい場合にはdisplay:blockかdisplay:inline-blockにすると「今の文字サイズが横幅なんだ」と認識して中央にいってくれるみたいです。

…ただ、inline-blockは予期せぬ挙動する事あるので、個人的にはあまり使いたくないのですが。

なので、3つの中で一番良いものを選ぶと良いと思います。display:flexも自分がよく分かっていないだけで、ちゃんとした制御方法があると思います。