Why doesn t margin auto center an image

Question

lt html gt   lt head gt   lt title gt Test lt  title gt   lt  head gt   lt body gt       lt div gt           lt img src  queuedError jpg  style  margin auto  width 200px     gt       lt  div gt   lt  body gt   lt  html gt    The div expands to 100  as it should but the image does not center itself  Why

User · Answer

open div then put   style  width 100    margin 0px auto      image tag  or  content     close div

User · Answer

i know this is an old post  but wanted to share how i solved the same problem    My image was inheriting a float left from a parent class  By setting float none I was able to make margin 0 auto and display  block work properly  Hope it may help someone in the future

User · Answer

I have found    margin  0 auto  works for me  But I have also seen it NOT work due to the class being trumped by another specificity that had     float left  so watch for that you may need to add     float none  this worked in my case as I was coding a media query

User · Answer

I ve found that I must define a specific width for the object or nothing else will make it center  A relative width doesn t work

User · Answer

You need to render it as block level   img      display  block     width  auto     margin  auto

User · Answer

Add style  text-align center    try below code    lt html gt   lt head gt   lt title gt Test lt  title gt   lt  head gt   lt body gt       lt div style  text-align center vertical-align middle   gt           lt img src  queuedError jpg  style  margin auto  width 200px     gt       lt  div gt   lt  body gt   lt  html gt

User · Answer

lt div style  text-align center   gt       lt img src  queuedError jpg  style  margin auto  width 200px     gt   lt  div gt

User · Answer

Because your image is an inline-block element  You could change it to a block-level element like this    lt img src  queuedError jpg  style  margin auto  width 200px display block    gt    and it will be centered

[html] Why doesn't margin:auto center an image?

Examples related to html

Examples related to css