小粋空間  -  a cheap joke and a play on words site

CSS でブログ本文の画像だけをセンタリングする

ブログのエントリー本文は、一般的に左寄せで表示しますが、「本文中の画像だけをセンタリングしたい場合はどうすればいいですか？」というご質問を頂きましたので、本エントリーで紹介します。

このカスタマイズを行えば、下の画面のように、画像だけをセンタリングすることができます。

ちなみに、これは昨年の11月に頂いた質問で、もっと早くエントリーを公開する予定でしたが、完全に忘却の彼方でした。大変申し訳ありません。

１．設定方法

エントリー全体が、

class="entry"

という class 属性で括られていると仮定した場合、CSS に、

.entry img {
    display:block;
    margin: 0 auto;
    text-align: center;
}

を追加するだけです。

class属性名が異なる場合は .entry の部分を変更してください。また、セレクタ名を img という要素セレクタにしてしまうと、ブログ全体に設定が蔓延してしまうので、必ずエントリー本文に絞り込むセレクタを設定してください。

２．Movable Type 4 の場合

Movable Type 4 であれば、ブログ記事に画像をアップロードした時に配置の設定が可能です。「位置」欄にある「中央」を選択すればOKです。

この設定を行うと、img 要素に style 属性として、

style="margin: 0pt auto 20px; text-align: center; display: block;"

が設定されます。

img 要素にダイレクトに CSS が設定されるので、カスケードの優先度から、テンプレートを入れ替えても効果は変わりません。