如何水平居中图像,并将其对齐到容器的底部? [英] How to center an image horizontally and align it to the bottom of the container?
问题描述
如何同时将图片水平居中并与容器底部对齐?
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.
这里是我有:
.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>
该代码将图像对齐到div的底部。我需要添加/更改以使图像在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 */
}
说明:绝对定位的元素将相对于具有非静态定位的最靠近的父元素。我假设你对你的 .image_block
显示感到满意,所以我们可以离开相对定位。
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.
因此,< a>
元素将相对于 .image_block
定位,底部对齐。然后,我们 text-align:center
< a>
元素,它是 .image_block
的大小。
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
.
< img>
将适当居中。
这篇关于如何水平居中图像,并将其对齐到容器的底部?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!