記事中の画像を真ん中寄せにする方法

以下のCSSをデザインCSSに貼り付けます。

.entry-content img.hatena-fotolife {
    display: block;
    margin: 0 auto;
}

解説

imgなどのインライン要素を中央寄せする場合、インライン要素を囲っているブロック要素にtext-align:centerを適用する必要があります。

今回はimgをピンポイントで中央寄せしたいので、imgをブロック要素にしてmarginの左右にautoを適用します。

この方法でimgを中央寄せする際の注意点は、imgをブロック要素にしているので、imgタグを挿入するたびに必ず改行されてしまうことです。

ASPなどのアフィリエイトリンクにはアクセス解析用の1pxの空白画像が付属していることがあり、すべてのimgをブロック要素にしてしまうと、空白の画像のところでいきなり改行されるので物凄く不自然なことになります。

幸い、はてなブログのはてなフォトライフから画像を貼り付けると.hatena-fotolifeというクラスが付与されるみたいなので、それだけを狙って中央寄せすることで事故を防ぎます。