WordPress個別サポート

WordPressの投稿や固定ページに入力する箇条書きや画像は中央寄せにしたいこともあります。たとえば、テキストエディタに次のようなHTMLを入力して箇条書きを作成します。

<div id="list01">
<ul>
<li>WordPressによるホームページ作成講座</li>
<li>WordPress個別サポート</li>
<li>WordPressマスター講座</li>
</ul>
</div>

「text-align: center;」を使ってセンタリングしようと考えますが、うまくいきません。

/* うまくいかない中央寄せ */
div#list01 {
    text-align: center;
}

表示結果は次のようにセンタリングされますが、全体が中央寄せになってしまいます。

うまくいかない中央寄せ

うまくいかない中央寄せ

「text-align: center;」の代わりにmarginで左右の余白を自動(auto)にすることで、ブロックを中央寄せにして箇条書きの左端をそろえることができます。

/* 左右の余白を自動調整して中央寄せ */
div#list01 {
    margin: 10px auto;
    width:300px;
}

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

左右の余白を自動調整して中央寄せ

左右の余白を自動調整して中央寄せ

marginの「10px auto」は「上下 左右」の余白を示しています。左右に「auto」を指定する場合は、ブロックの幅を指定する必要があります。

スポンサーリンク

画像を中央寄せにする

投稿や固定ページに挿入する画像を中央寄せにする場合は、画像を追加するときの「配置」で「中央」を選ぶ方法があります。

画像を中央に配置

画像を中央に配置

CSSで制御する場合、左右の余白(margin: … auto;)に加えて「display: block;」も必要です。

/* 画像を中央寄せ */
#content img.wp-image-589 {
    margin: 0 auto;
    display: block;
}

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

画像を中央寄せにする

画像を中央寄せにする

紹介した「画像を中央寄せ」のCSSは一般的なテーマで定義されている「aligncenter」というclassと同じ考え方です。「配置」の「中央」で画像を追加すると「aligncenter」というclass名が付加されて画像が中央寄せになる仕組みです。

主なテーマの「aligncenter」(中央寄せ)のCSSを紹介しておきます。

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#content .aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

※それぞれ、img.aligncenterに対しても同じようなスタイルが定義されています。

この記事をSNSで共有する
スポンサーリンク
WordPressでお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
CSSがよくわからないときは
簡単な質問からWordPressメールサポートで対応します。ご活用ください。
こんなときはご相談ください(相談・見積もり無料)
  • テーマのCSS構成がよくわからない
  • CSSの直し方を教えてほしい
  • CSSの修正ミスでデザインが崩れた!
WordPress個別サポートの連絡先

WordPress個別サポートへの問い合わせWordPress個別サポートの申し込み

関連記事

スポンサーリンク