画像をCSSで中央揃えするときは、imgだけでなく外側にもtext-align:centerしなきゃだめだよ

今までその都度、ググってCSSを書いてきたけど、今回はうまくみつからず人に教えてもらったので、今後のために自分用メモ

サイトを作っていて、画像を中心揃えにしたいことはよくあります。そのCSSの書き方です。

今回はWordPressのthe_post_thumbnail()で表示されるimgを左右中央揃えにしました。
当初、そのimg要素に対して下記の様なCSSを書いたのですが、うまくいかず。

img.attachment-post-thumbnail.wp-post-image {
    display: block;
     margin: auto;
}

よつばデザインの後藤さんに相談したところ、外の要素にもtext-align:centerしなきゃだめだよとアドバイスをいただき、

div.span2.home-post {
    margin-top: 20px;
    text-align: center;
}

とすることで、無事、サムネイル画像を中央揃えすることができました。

対策したサイトはこちら！