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.
.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.