vertical-align image in div

Question

i have problem with image vertical-align in div   img thumb       float  left      height  120px      margin-bottom  5px      margin-left  9px      position  relative      width  147px      background-color  rgba 0  0  0  0 5       border-radius  3px      img thumb img       display  block      margin-left  auto      margin-right  auto      vertical-align  middle      lt div class  img thumb  gt       lt a class  images class  href  large jpg  rel  images  gt  lt img src  small jpg  title  img title  alt  img alt    gt  lt  a gt   lt  div gt    As far as i know i need  display  block   to position image in center and that works  Also in tutorials i find many answers but they are not  useful   because all of my image are NOT at the same height

User · Answer

you don t need define positioning when you need vertical align center for inline and block elements you can take mentioned below idea -  inline-elements  -  lt img style  vertical-align middle      gt                      lt span style  display inline-block  vertical-align middle  gt  foo lt br gt bar  lt  span gt     block-elements  -  lt td style  vertical-align middle  gt       lt  td gt                     lt div style  display table-cell  vertical-align middle  gt       lt  div gt    see the demo - http   jsfiddle net Ewfkk 2

User · Answer

If you have a fixed height in your container  you can set line-height to be the same as height  and it will center vertically  Then just add text-align to center horizontally   Here s an example  http   jsfiddle net Cthulhu QHEnL 1   EDIT  Your code should look like this    img thumb       float  left      height  120px      margin-bottom  5px      margin-left  9px      position  relative      width  147px      background-color  rgba 0  0  0  0 5       border-radius  3px      line-height 120px      text-align center      img thumb img       vertical-align  middle      The images will always be centered horizontally and vertically  no matter what their size is  Here s 2 more examples with images with different dimensions   http   jsfiddle net Cthulhu QHEnL 6   http   jsfiddle net Cthulhu QHEnL 7   UPDATE  It s now 2016  the future   and looks like a few things are changing  finally      Back in 2014  Microsoft announced that it will stop supporting IE8 in all versions of Windows and will encourage all users to update to IE11 or Edge  Well  this is supposed to happen next Tuesday  12th January    Why does this matter  With the announced death of IE8  we can finally start using CSS3 magic   With that being said  here s an updated way of aligning elements  both horizontally and vertically    container       position  relative      container  element      position  absolute     left  50      top  50      transform  translate -50   -50        Using this transform  translate    method  you don t even need to have a fixed height in your container  it s fully dynamic  Your element has fixed height or width  Your container as well  No  It doesn t matter  it will always be centered because all centering properties are fixed on the child  it s independent from the parent  Thank you CSS3   If you only need to center in one dimension  you can use translateY or translateX  Just try it for a while and you ll see how it works  Also  try to change the values of the translate  you will find it useful for a bunch of different situations   Here  have a new fiddle  https   jsfiddle net Cthulhu 1xjbhsr4   For more information on transform  here s a good resource   Happy coding

User · Answer

Old question but nowadays CSS3 makes vertical alignment really simple   Just add to the  lt div gt  this css   display flex  align-items center  justify-content center      JSFiddle demo  Live Example    x000D   x000D   img thumb   x000D      float  left  x000D      height  120px  x000D      margin-bottom  5px  x000D      margin-left  9px  x000D      position  relative  x000D      width  147px  x000D      background-color  rgba 0  0  0  0 5   x000D      border-radius  3px  x000D      display flex  x000D      align-items center  x000D      justify-content center  x000D    x000D   lt div class  img thumb  gt  x000D       lt a class  images class  href  http   i imgur com 2FMLuSn jpg  rel  images  gt  x000D          lt img src  http   i imgur com 2FMLuSn jpg  title  img title  alt  img alt    gt  x000D       lt  a gt  x000D   lt  div gt  x000D   x000D   x000D

[css] vertical-align image in div

Examples related to css

Examples related to image

Examples related to vertical-alignment