読者です 読者をやめる 読者になる 読者になる

citron syrup

HTML,CSS,js,Ruby,Swift

imgを中心に配置したい時

imgを中心に配置したくて、imgタグに直接classを追加しmarginをautoにしたのに
反映されなくてとても悲しい思いをしました。

imgはインライン要素というもので、ブロック要素というものでないとmarginを指定できないらしい。
imgを中心に配置したい際は

HTML

<img class="citron" src="images.jpg">

CSS

.citron {
  display: block; //ଘ(ㆁvㆁ)<ブロック要素に変換
  margin: 0 auto;
}

もしくは

HTML

<div class="citron">
   <img  src="images.jpg">
</div>

CSS

.citron {
  text-align: center;
}

と書くとできました。