CSS Margin: 0 Auto; is not working on <img> tag

Question

My markup is simple, and I'm using inline CSS. My goal is to get the image centered using margin: 0 auto; in the style HTML attribute. Here's code that I have tried:

<div style="width: 100%;">
<img src="http://dummyimage.com/200x300/000000/fff" style="margin: 0 auto;"/>
</div>

Why is the CSS not centering my <img>?

Answer 1

You must use display: block to make margin: 0px auto have any effect.

<div style="width: 100%;">
<img src="http://placekitten.com/g/200/300" style="display: block; margin: 0px auto;">
</div>

Answer 2

Your style attribute syntax is wrong on the div. Also, change the style on the img tag like so:

<div style="width:100%">
<img src="https://4c206b86fe5a0219d31bb1ae55c8bbdc3f028879-www.googledrive.com/host/0BzEiAml5ygAeU3N6QTRUUW53Vjg/" width="50%" height="auto" style="margin:0 auto; display:block">
</div>