スタイルシートの「中央寄せ」ってよく使うデザインにも関わらず意外と難易度が高いんですよね。ここでは、スタイルシートの代表的な中央寄せの方法「text-align:center;」と「margin:0 auto;」の失敗例を通して使い方をマスターしていきたいと思います。
コンテンツ
margin:0 auto;が効かない
ボタンで表示を切り替えてご覧ください。
See the Pen center error01 by ken (@ken81) on CodePen.
HTML
<p>中央寄せが効かないよ。</p>
CSS
p{margin:0 auto;}
上は、pタグをmarginで中央寄せしている例です。
「marginはブロック要素に効くはずでしょ？p要素ってブロック要素じゃなかったの！？」という方。
これが失敗している理由は、背景色を入れると分かります。
See the Pen center error02 by ken (@ken81) on CodePen.
CSS
p{
margin:0 auto;
background:#ffff00;
}
黄色の背景が横いっぱいに広がっていますね。pタグは「見た目」はテキストだけに見えますが、実際はブロック要素として初期設定で幅が100%なのです。つまり、幅がすでにいっぱい（100%）なので左右に余白（margin）を設けることができません。よって中央に寄せることができません。
これに対する対策は、下記の２つです。
対策１：「text-align:center;」でテキストだけ中央に寄せる
ブロック要素内にあるテキストを中央寄せするだけなら、marginではなくtext-alignで対応できます。
See the Pen center solution01 by ken (@ken81) on CodePen.
中央寄せになりましたね。でも、「テキストが複数行になる場合は、左端はそろえたいんだよね」という場合もあります。そういうときは、やはりmarginを使います。
対策２：幅を指定してmargin:0 auto;を指定
初期設定ではブロック要素（pタグ）の幅が100%だったので、幅を指定してあげればよいのです。
See the Pen center solution02 by ken (@ken81) on CodePen.
CSS
.center{
background:#ffff00;
width:16em;
margin:0 auto;
}
pタグの幅を指定して中央寄せができました。ここでのポイントは、pタグの幅を「em」という単位で指定したことです。「em」という単位は「１em ＝ １文字の長さ」という意味なので、長い２行目「中にあるテキストだけを中央寄せ。」の16文字に合わせて「16em」としました。
text-align:center;が効かない
See the Pen center error02 by ken (@ken81) on CodePen.
HTML
<span>中央寄せが効かないよ。</span>
CSS
span{text-align:center;}
今度は、text-align:center;を指定したのに効かない例です。spanタグが中央に寄ってくれません。実はtext-align:center;は意外とややこしいプロパティです。
対策：text-align:center;を正しく使う
text-align:center;が効くためには、次の２つの条件を満たす必要があります。
１．中央寄せしたい要素がインライン要素であること。
第１の条件は、text-align:center;はインライン要素に対して有効だということです。
今回のspanタグはインライン要素なので条件をクリアしています。
２．セレクタはブロック要素である親要素を指定する。
この２つ目の条件がクリアできていませんでした。
spanタグを中央に寄せたいのだからスタイルシートでspanを指定したくなってしまいます。
span{text-align:center;}
でも、これが間違いなのです。
正しくは、ブロック要素である親要素をセレクタで指定する必要があります。「中央」を指定するためには、「どこに対して中央なの？」という基準が分からなければいけません。だから、基準となるブロック要素を指定するというわけですね。
先ほどの例でいうと、まず、span要素に親要素がいないのでブロック要素（ここではp要素）でラップします。
HTML
<p><span>中央寄せが効かないよ。</span></p>
次にセレクタをp要素にしてtext-align:center;を適用させます。こうすると子要素spanが中央に寄ってくれます。
See the Pen center solution03 by ken (@ken81) on CodePen.
CSS
p{text-align:center;}
こんな感じです。
画像が中央に寄らない
See the Pen WXNwPW by ken (@ken81) on CodePen.
これは画像の中央寄せが効かない例です。画像にmargin:0 auto;とtext-align:center;を両方使っています。私のように強引にこういう書き方をしてしまった方は少なくないはずです。
CSS
img{
text-align:center;
margin:0 auto;
}
対策１：text-align:center;を正しく使う
まず、画像はimg要素になりますのでインライン要素です。もし、text-align:center;を効かせるのでしたら、親のブロック要素がセレクタでなければいけませんね。
ここではimg要素の親要素の.wrapをセレクタにすることで中央寄せができました。これが一つ目の解決法です。
See the Pen img_center02 by kenichi (@ken81) on CodePen.
CSS
.wrap{
text-align:center;
}
対策２：margin:0 auto;を正しく使う
でも、上の例のように親要素に対して、text-align:center;を指定してしまうと、同じ階層のテキストなどもすべて中央に寄ってしまいます。「画像だけ中央に寄せたい」という場合は、やはりmargin:0 auto;の指定が必要です。
特例として画像はインライン要素にも関わらず、paddingやmarginが効いてくれる要素なので、そのままmargin:0 auto;とやってしまいたくなるのですが、imgタグには「auto」は効きません。これを有効にするためにはdisplay:block;を追加しましょう。
See the Pen img_center03 by kenichi (@ken81) on CodePen.
CSS
img{
margin:0 auto;
display:block;
}
WordPressの記事内の画像ならclass="aligncenter"で中央寄せできます
HTML
<img class="aligncenter" src="https://cotodama.co/wp-content/uploads/2017/10/sample_img.png">
WordPressには画像を中央に配置する機能が備わっているので、imgタグにclass="aligncenter"を追加して中央寄せすれば良いですね。
margin:0 auto;もtext-align:center;も効かない。
See the Pen inline-block by ken (@ken81) on CodePen.
HTML
<h3>インラインブロックだよ。</h3>
CSS
h3{
display:inline-block;
background:#ffff00;
width:12em;
text-align:center;
margin:0 auto;
}
これは、inline-blockという要素を中央寄せしようとした例です。「inline-block」は横並びになってくれるブロック要素なので使い勝手のよい場面もありますが、中央寄せとなると少しやっかいな存在です。
結局、やけくそになりmargin:0 auto;とtext-align:center;を両方指定してみたけど、どっちも効いてくれませんでした。何が原因だと思いますか？
原因１：inline-blockにmargin:0 auto;は効かない。
「ちゃんとwidthを指定しているのにどうしてmargin:0 auto;が効かないんだろう？」と思った方もいるかもしれません。でもそもそも「inline-block」は数値を使った指定はできてもmargin:0 auto;を使った中央寄せは効きません。
原因２：text-align:center;が親のブロック要素をセレクタにしていない。
text-align:center;の基本ルールは「セレクタは親のブロック要素」です。上の例で中央寄せしたい場合は親要素を作る必要がありました。
See the Pen inline-block02 by ken (@ken81) on CodePen.
CSS
h3{
display:inline-block;
background:#ffff00;
width:12em;
margin:0 auto;
}
.wrap{
text-align:center;
}
これで中央寄せができました。
まとめ
最後に中央寄せのまとめをさせていただきます。
margin: 0 auto;は、ブロック要素に対して有効で、幅を指定してから中央寄せする。text-align: center;はインライン要素に対して有効でブロック要素である親をセレクタに指定する。- inline-blockには、
margin: 0 auto;は効かないので、親のブロック要素にtext-align: center;で指定する。
今後も、仕事中に「あれ？中央寄せが効かないぞ！」に遭遇したときは追加していきたいと思います。
最後までお読みいただきありがとうございました。
