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; }  <div class="image_block">     <a href="..."><img src="..." border="0"></a> </div> 

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.

Answer 1

.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 <a> element will be positioned relative to the .image_block, which will give us the bottom alignment. then, we text-align: center the <a> element, and give it a 100% width so that it is the size of .image_block.

the <img> within <a> will then center appropriately.