WordPress個別サポート

WordPressに限りませんが次のようなdivブロックを中央寄せしたいこともあります。

<div class="center-block">
個別指導のWordPress講座です。
銀座またはスカイプで受講できます。
</div>

一般的には左寄せで表示されます。

左寄せのブロック(中央寄せにしたい)

左寄せのブロック(中央寄せにしたい)

このブロックを中央寄せするCSSとして「margin: 0 auto;」が有名ですが、うまくいかないこともあります。その原因と対策を紹介します。

スポンサーリンク

原因1:ブロック幅が広すぎる

このブロックを中央寄せしたいので、次のようなCSSを記述します。

.center-block {
    margin: 0 auto;
}

このCSSでは、おそらくうまくいきません。

中央寄せがうまくいかない

中央寄せがうまくいかない

原因はブロックの幅です。現在のブロック幅を確認するため、CSSに枠線(border)を付けてみましょう。

.center-block {
    margin: 0 auto;
    border:solid 1px #000;
}

ブロックの幅がコンテンツエリアいっぱいに広がっていることを確認できます。

枠線を付けてブロック幅を確認

枠線を付けてブロック幅を確認

ピンときたかもしれませんが、このブロックは幅の広い状態(幅100%)で“中央寄せ”になっているということです。

つまり、中央寄せは機能していますがブロック幅が広すぎるのです。

試しに適当なブロック幅(width)を指定してみましょう。

.center-block {
    margin: 0 auto;
    border:solid 1px #000;
    width: 250px;
}

今度は中央寄せがうまくいきます。確認できたら枠線(border)を消してください。

幅を狭くすれば中央寄せが機能する

幅を狭くすれば中央寄せが機能する

原因2:インライン要素には「余白」がない

サービスページなどへのリンクを中央寄せしたいこともあります。

<a class="center-block" href="#">個別指導のWordPress講座</a>

次のようにリンクのaタグに対して中央寄せや幅指定をしてもうまくいきません。

.center-block {
    margin: 0 auto;
    width: 250px;
}

リンクは左寄せのままです。

リンクに中央寄せが反映されない

リンクに中央寄せが反映されない

これはリンクのaタグがインライン要素(文章中にレイアウトされる要素)だからです。文章中に含まれるパーツなので余白の概念がありません。

この場合、リンクをブロック要素にする方法があります。具体的には次のように「display: block;」を追加します。

.center-block {
    margin: 0 auto;
    width: 250px;
    display: block;
}
「display: inline-block;」という指定も可能です。

これでリンクがブロック要素になるので、中央寄せが機能します。

中央寄せが機能する

中央寄せが機能する

リンクのaタグをブロック要素のdivタグで囲むなどしても解決できます。

<div class="center-block">
<a href="#">個別指導のWordPress講座</a>
</div>

原因3:画像もブロック要素ではない

バナーリンクなどの画像だけを中央寄せしたいこともあります。この場合もリンクと同じようにdivで囲めば解決です。imgタグに直接指定する場合、次の中央寄せは機能しません。

.center-block {
    margin: 0 auto;
    width: 250px;
}

HTMLは次のようになっています。

<img class="center-block" src="http://…略…contact.jpg" />

表示結果は次のようになります。

ブロック幅を指定しても中央寄せが機能しない

ブロック幅を指定しても中央寄せが機能しない

原因はリンクと同じように画像もブロック要素ではないためです。

少し詳しい方は「画像には余白を使える」ことをご存じかもしれませんが「margin: 0 auto;」はうまくいきません。この場合、リンクと同じように「display: block;」を指定してブロック要素にすれば中央寄せできます。

.center-block {
    margin: 0 auto;
    width: 250px;
    display: block;
}

今度は中央寄せがうまくいきます。

画像が中央寄せに

画像が中央寄せに

まとめ

CSSの中央寄せ「margin: 0 auto;」がうまくいかない場合は、そのブロックに適切なサイズが指定されているか、その要素がブロック要素で表示されているかを確認してみましょう。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート