(K)CSSでimg画像を中央に表示させる8個の方法まとめ | web(K)campus|WEBデザイナーのための技術系メモサイト

CSSでレイアウトを組んでいる時によくある希望のレイアウトは「画像の中央配置」 そんな訳で今回は自分がCSSでコーディング作業をしている時に使用している画像の中央配置の方法を色んなサイトで調べたりするのが面倒なので、自分用の備忘録代わりにまとめておきます。 （1）「text-align:center」でインライン要素を中央寄せ 「text-align:center」はもっとも一般的な中央配置のプロパティですが、前に「text」と書いてあるとおり、テキストや画像などのインライン要素でしか使えません。画像をただ単に中央に配置したいだけなら、これだけでおけ。 【HTML】 <p class="img_center"> <img src="img/sample_image01.jpg" alt="サンプル画像" /> </p> 【CSS】 p.img_center{ text-align: cen

[naohero22]

.img_block img{ display: block; margin:auto; } インラインボックス要素にする。

[yayocan]

画像の中央寄せ