HOME > Web > [CSS][Wordpress]imgタグに対して中央揃えにする方法

[CSS][Wordpress]imgタグに対して中央揃えにする方法

Wordpressで記事を掲載するときに画像を中央揃えしたいときありますよ。その方法について紹介します。

img要素をブロック要素にするのがコツ

img要素はデフォルトではブロック要素ではないので、marginで左右に余白を設定しても効かないのです。 なので下記のように指定します。

.aligncenter{ display: block;/*ブロック要素にする*/ margin:15px auto;/*左右に均等に余白設定(上下も15pxの余白)*/ border:1px solid #666;/*画像に枠線*/ }

わざわさimgタグの外側にdivタグやpタグなどのブロック要素をラップして中央揃えする必要はなく簡単に実現できます。