CSS

CSS|中央寄せが効かないときは・・・

スタイルシートの「中央寄せ」ってよく使うデザインにも関わらず意外と難易度が高いんですよね。ここでは、スタイルシートの代表的な中央寄せの方法「text-align:center;」と「margin:0 auto;」の失敗例を通して使い方をマスターしていきたいと思います。

marginが効かない

ボタンで表示を切り替えてご覧ください。

See the Pen center error01 by ken (@ken81) on CodePen.

上は、pタグをmarginで中央寄せしている例です。
「marginはブロック要素に効くはずでしょ?p要素ってブロック要素じゃなかったの!?」という方。
これが失敗している理由は、背景色を入れると分かります。

See the Pen center error02 by ken (@ken81) on CodePen.

黄色の背景が横いっぱいに広がっていますね。pタグは「見た目」はテキストだけに見えますが、実際はブロック要素として初期設定で幅が100%なのです。つまり、幅がすでにいっぱい(100%)なので左右に余白(margin)を設けることができません。よって中央に寄せることができません。

これに対する対策は、下記の2つです。

対策1:「text-align:center;」でテキストだけ中央に寄せる

ブロック要素内にあるテキストを中央寄せするだけなら、marginではなくtext-alignで対応できます。

See the Pen center solution01 by ken (@ken81) on CodePen.


中央寄せになりましたね。でも、テキストが複数行になる場合は、左端はそろえたいんだよね、という場合もあります。そういうときは、やはりmarginを使います。

対策2:幅を指定してmargin:0 auto;を指定

初期設定ではブロック要素(pタグ)の幅が100%だったので、幅を指定してあげればよいのです。

See the Pen center solution02 by ken (@ken81) on CodePen.

pタグの幅を指定して中央寄せができました。ここでのポイントは、pタグの幅を「em」という単位で指定したことです。「em」という単位は「1em = 1文字の長さ」という意味なので、長い2行目「中にあるテキストだけを中央寄せ。」の16文字に合わせて「16em」としました。

text-alignが効かない

See the Pen center error02 by ken (@ken81) on CodePen.


今度は、「text-align:center;」を指定したのに効かない例です。spanタグが中央に寄ってくれません。実は「text-align:center;」は意外とややこしいプロパティです。

対策:text-align:center;を正しく使う

「text-align:center;」が効くためには、次の2つの条件を満たす必要があります。

1.中央寄せしたい要素がインライン要素であること。
第1の条件は、「text-align:center;」はインライン要素に対して有効だということです。
今回のspanタグはインライン要素なので条件をクリアしています。

2.セレクタはブロック要素である親要素を指定する。
この2つ目の条件がクリアできていませんでした。
spanタグを中央に寄せたいのだからスタイルシートでspanを指定したくなってしまいます。

span{text-align:center;}

でも、これが間違いなのです。

正しくは、ブロック要素である親要素をセレクタで指定する必要があります。先ほどの例でいうと、まず、span要素に親要素がいないのでブロック要素(ここではp要素)でラップします。

<p><span>中央寄せが効かないよ。</span></p>

次にセレクタをp要素にして「text-align:center;」を適用させます。こうすると子要素(span)が中央に寄ってくれます。

See the Pen center solution03 by ken (@ken81) on CodePen.


こんな感じです。

画像が中央に寄らない

See the Pen WXNwPW by ken (@ken81) on CodePen.

これは画像の中央寄せが効かない例です。画像に「margin:0 auto;」と「text-align:center;」を両方使っています。私のように強引にこういう書き方をしてしまった方は少なくないはずです。

img{
  text-align:center;
  margin:0 auto;
}

対策1:text-align:center;を正しく使う

まず、画像はimg要素になりますので、インライン要素です。もし、「text-align:center;」を効かせるのでしたら、親のブロック要素がセレクタでなければいけませんね。

ここではimg要素の親要素の.wrapをセレクタにすることで中央寄せができました。これが一つ目の解決法です。

See the Pen img_center02 by kenichi (@ken81) on CodePen.

対策2: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.

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.

これは、「inline-block」という要素を中央寄せしようとした例です。「inline-block」は横並びになってくれるブロック要素なので使い勝手のよい場面もありますが、中央寄せとなると少しやっかいな存在です。

結局、やけくそになり「margin:0 auto;」と「text-align:center;」を両方指定してみたけど、どっちも効いてくれませんでした。何が原因だと思いますか?

原因1:「inline-block」に「margin:0 auto;」は効かない。

ちゃんとwidthを指定しているのにどうして「margin:0 auto;」が効かないんだろう?と思った方もいるかもしれません。でもそもそも「inline-block」は数値を使った指定はできても「margin:0 auto;」を使った中央寄せは効きません。

原因2:「text-align:center;」が親のブロック要素をセレクタにしていない。

「text-align:center;」の基本ルールは「セレクタは親のブロック要素」です。上の例で中央寄せしたい場合は親要素を作る必要がありました。

See the Pen inline-block02 by ken (@ken81) on CodePen.

これで中央寄せができました。

まとめ

最後に中央寄せのまとめをさせていただきます。

  1. margin: 0 auto;は、ブロック要素に対して有効で、幅を指定してから中央寄せする。
  2. text-align: center;はインライン要素に対して有効でブロック要素である親をセレクタに指定する。
  3. inline-blockには、margin: 0 auto;は効かないので、親のブロック要素にtext-align: center;で指定する。

今後も、仕事中に「あれ?中央寄せが効かないぞ!」に遭遇したときは追加していきたいと思います。
最後までお読みいただきありがとうございました。

WordPressテーマ「MAG(TCD036)」

最近の記事

  1. CSS

    CSS|中央寄せが効かないときは・・・
  2. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  3. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  4. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  5. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
PAGE TOP