Center image in div horizontally

Question

I have an img in a div  class  top image   and I want this image to be exactly in the middle of the div but nothing I try works     Thanks for any help

User · Answer

I hope this would be helpful    top image img  display  block  margin  0 auto

User · Answer

Every solution posted here assumes that you know the dimensions of your img  which is not a common scenario  Also  planting the dimensions into the solution is painful   Simply set      for the img inside your div    display  block  margin-left  auto  margin-right  auto    or     for the img inside your div    display  block  margin  0 auto    That s all   Note  that you ll also have to set an initial min-width for your outer div

User · Answer

I think its better to to do text-align center for div and let image take care of the height  Just specify a top and bottom padding for div to have space between image and div  Look at this example  http   jsfiddle net Tv9mG

User · Answer

A very simple and elegant solution to this is provided by W3C  Simply use the margin 0 auto declaration as follows    top image img   margin 0 auto      More information and examples from W3C

User · Answer

text-align  center will only work for horizontal centering  For it to be in the complete center  vertical and horizontal you can do the following    div       position  relative    div img       position  absolute      top  50       left  50       margin-left   -50  of your image s width       margin-top   -50  of your image s height

User · Answer

lt div class  outer  gt       lt div class  inner  gt           lt img src  http   1 bp blogspot com  74so2YIdYpM TEd09Hqrm6I AAAAAAAAApY rwGCm5 Tawg s320 tall copy jpg  alt  tall image    gt       lt  div gt   lt  div gt   lt hr   gt   lt div class  outer  gt       lt div class  inner  gt           lt img src  http   www 5150studios com au wp-content uploads 2012 04 wide jpg  alt  wide image    gt       lt  div gt   lt  div gt    CSS  img       max-width  100       max-height  100       display  block      margin  auto auto      outer       border  1px solid  888      width  100px      height  100px      inner       display table-cell      height  100px      width  100px      vertical-align  middle

User · Answer

This took me way too long to figure out  I can t believe nobody has mentioned center tags   Ex    lt center gt  lt img src    yourimage png   gt  lt  center gt    and if you want to resize the image to a percentage    lt center gt  lt img src    yourimage png  width    75    gt  lt  center gt    GG America

[html] Center image in div horizontally

Examples related to html

Examples related to css