How to center an image horizontally and align it to the bottom of the container

Question

How can I center an image horizontally and aligned to the bottom of the container at the same time    I have been able to center the image horizontally by its self  I have also been able to align the bottom of the container by its self  But I have not been able to do both at the same time    Here is what I have    image block       width  175px      height  175px      position  relative      margin  0 auto     image block a img   position  absolute  bottom  0      lt div class  image block  gt       lt a href       gt  lt img src       border  0  gt  lt  a gt   lt  div gt    That code aligns the image to the bottom of the div  What do I need to add change to make it also center the image horizontally inside the div  The image size is not known before hand but it will be 175x175 or less

User · Answer

Remove the position  relative  line  I m not sure why exactly but it fixes it for me

User · Answer

This also works  taken a hint from this question    image block     height  175px    width 175px    position relative     image block a img   margin auto     Required     position absolute     Required     bottom 0     Aligns at the bottom     left 0 right 0     Aligns horizontal center     max-height 100      images bigger than 175 px      max-width 100       will be shrinked to size

User · Answer

This is tricky  the reason it s failing is that you can t position via margin or text-align while absolutely positioned   If the image is alone in the div  then I recommend something like this    image block       width  175px      height  175px      line-height  175px      text-align  center      vertical-align  bottom      You may need to stick the vertical-align call on the image instead  not really sure without testing it   Using vertical-align and line-height is going to treat you a lot better  though  than trying to mess around with absolute positioning

User · Answer

image block          width  175px      height  175px      position  relative      image block a        width  100       text-align  center      position  absolute      bottom  0px      image block img          nothing specific         explanation  an element positioned absolutely will be relative to the closest parent which has a non-static positioning  i m assuming you re happy with how your  image block displays  so we can leave the relative positioning there   as such  the  lt a gt  element will be positioned relative to the  image block  which will give us the bottom alignment  then  we text-align  center the  lt a gt  element  and give it a 100  width so that it is the size of  image block   the  lt img gt  within  lt a gt  will then center appropriately

User · Answer

have you tried    image block  text-align  center  vertical-align  bottom

User · Answer

Remove the position  relative  line  I m not sure why exactly but it fixes it for me

User · Answer

Remove the position  relative  line  I m not sure why exactly but it fixes it for me

User · Answer

image block          width  175px      height  175px      position  relative      image block a        width  100       text-align  center      position  absolute      bottom  0px      image block img          nothing specific         explanation  an element positioned absolutely will be relative to the closest parent which has a non-static positioning  i m assuming you re happy with how your  image block displays  so we can leave the relative positioning there   as such  the  lt a gt  element will be positioned relative to the  image block  which will give us the bottom alignment  then  we text-align  center the  lt a gt  element  and give it a 100  width so that it is the size of  image block   the  lt img gt  within  lt a gt  will then center appropriately

User · Answer

image block          width  175px      height  175px      position  relative      image block a        width  100       text-align  center      position  absolute      bottom  0px      image block img          nothing specific         explanation  an element positioned absolutely will be relative to the closest parent which has a non-static positioning  i m assuming you re happy with how your  image block displays  so we can leave the relative positioning there   as such  the  lt a gt  element will be positioned relative to the  image block  which will give us the bottom alignment  then  we text-align  center the  lt a gt  element  and give it a 100  width so that it is the size of  image block   the  lt img gt  within  lt a gt  will then center appropriately

User · Answer

header2      display  table-cell     vertical-align  bottom     background-color Red       lt div style  text-align center  height 300px  width 50    id  header2  gt   lt div class  right  id  header-content2  gt     lt p gt this is a test lt  p gt   lt  div gt   lt  div gt

User · Answer

Remove the position  relative  line  I m not sure why exactly but it fixes it for me

User · Answer

This also works  taken a hint from this question    image block     height  175px    width 175px    position relative     image block a img   margin auto     Required     position absolute     Required     bottom 0     Aligns at the bottom     left 0 right 0     Aligns horizontal center     max-height 100      images bigger than 175 px      max-width 100       will be shrinked to size

User · Answer

wouldn t  margin-left auto  margin-right auto    added to the  image block a img do the trick  Note that that won t work in IE6  maybe 7 not sure  there you will have to do on  image block the container Div  text-align center    position relative  could be a problem too

User · Answer

This is tricky  the reason it s failing is that you can t position via margin or text-align while absolutely positioned   If the image is alone in the div  then I recommend something like this    image block       width  175px      height  175px      line-height  175px      text-align  center      vertical-align  bottom      You may need to stick the vertical-align call on the image instead  not really sure without testing it   Using vertical-align and line-height is going to treat you a lot better  though  than trying to mess around with absolute positioning

User · Answer

image block          width  175px      height  175px      position  relative      image block a        width  100       text-align  center      position  absolute      bottom  0px      image block img          nothing specific         explanation  an element positioned absolutely will be relative to the closest parent which has a non-static positioning  i m assuming you re happy with how your  image block displays  so we can leave the relative positioning there   as such  the  lt a gt  element will be positioned relative to the  image block  which will give us the bottom alignment  then  we text-align  center the  lt a gt  element  and give it a 100  width so that it is the size of  image block   the  lt img gt  within  lt a gt  will then center appropriately

User · Answer

have you tried    image block  text-align  center  vertical-align  bottom

User · Answer

header2      display  table-cell     vertical-align  bottom     background-color Red       lt div style  text-align center  height 300px  width 50    id  header2  gt   lt div class  right  id  header-content2  gt     lt p gt this is a test lt  p gt   lt  div gt   lt  div gt

User · Answer

wouldn t  margin-left auto  margin-right auto    added to the  image block a img do the trick  Note that that won t work in IE6  maybe 7 not sure  there you will have to do on  image block the container Div  text-align center    position relative  could be a problem too

User · Answer

wouldn t  margin-left auto  margin-right auto    added to the  image block a img do the trick  Note that that won t work in IE6  maybe 7 not sure  there you will have to do on  image block the container Div  text-align center    position relative  could be a problem too

User · Answer

have you tried    image block  text-align  center  vertical-align  bottom

User · Answer

have you tried    image block  text-align  center  vertical-align  bottom

User · Answer

This is tricky  the reason it s failing is that you can t position via margin or text-align while absolutely positioned   If the image is alone in the div  then I recommend something like this    image block       width  175px      height  175px      line-height  175px      text-align  center      vertical-align  bottom      You may need to stick the vertical-align call on the image instead  not really sure without testing it   Using vertical-align and line-height is going to treat you a lot better  though  than trying to mess around with absolute positioning

User · Answer

wouldn t  margin-left auto  margin-right auto    added to the  image block a img do the trick  Note that that won t work in IE6  maybe 7 not sure  there you will have to do on  image block the container Div  text-align center    position relative  could be a problem too

User · Answer

This is tricky  the reason it s failing is that you can t position via margin or text-align while absolutely positioned   If the image is alone in the div  then I recommend something like this    image block       width  175px      height  175px      line-height  175px      text-align  center      vertical-align  bottom      You may need to stick the vertical-align call on the image instead  not really sure without testing it   Using vertical-align and line-height is going to treat you a lot better  though  than trying to mess around with absolute positioning

[css] How to center an image horizontally and align it to the bottom of the container?

Examples related to css

Examples related to positioning