【CSS】 imgにclassを追加し、画像をセンター合わせに

<div></div>の間に画像を挿入して
センター合わせにする方法はよく使いますが


imgタグそのものにクラスを追加してセンター合わせにしたいときってありますよね。



その方法


【HTML例】

<img src="images/sample.jpg" alt=" " class="aligncenter" />

【CSS】

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

display:block; を先に記述し、画像をブロック要素にしてセンター合わせに。







＜補足＞
div要素を使ってセンター合わせにする場合。


【HTML例】

<div class="center"><img  src="images/sample.jpg" alt=" "  /></div>

【CSS】

.center {
  text-align: center;
}