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 hav

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

the within will then center appropriately.