[英]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. 但我无法同时做到这两点。
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. 该代码将图像与div的底部对齐。 What do I need to add/change to make it also center the image horizontally inside the div? 我需要添加/更改什么才能使图像在div内水平居中? The image size is not known before hand but it will be 175x175 or less. 图像尺寸在手前是未知的,但是它将是175x175或更小。
.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. 我假设您对.image_block
显示方式感到满意,因此我们可以将相对定位留在那里。
as such, the <a>
element will be positioned relative to the .image_block
, which will give us the bottom alignment. 因此, <a>
元素将相对于.image_block
,这将给我们底部对齐。 then, we text-align: center
the <a>
element, and give it a 100% width so that it is the size of .image_block
. 然后,我们text-align: center
将<a>
元素text-align: center
,并给它一个100%的宽度,使它的大小为.image_block
。
the <img>
within <a>
will then center appropriately. <a>
的<img>
将适当地居中。
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 */
}
wouldn't 不会
margin-left:auto;
margin-right:auto;
added to the .image_block
a img do the trick? 添加到.image_block
一个img做的伎俩?
Note that that won't work in IE6 (maybe 7 not sure) 请注意,这在IE6中不起作用(可能7不确定)
there you will have to do on .image_block
the container Div 你必须在.image_block
上做容器Div
text-align:center;
position:relative;
could be a problem too. 也可能是一个问题。
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: 如果图像在div中是单独的,那么我推荐这样的东西:
.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; 您可能需要在图像上粘贴vertical-align
调用; 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. 然而,使用vertical-align
和line-height
会让你感觉好多了,而不是试图搞清楚绝对定位。
Remove the position: relative;
删除position: relative;
line. 线。 I'm not sure why exactly but it fixes it for me. 我不确定为什么,但它为我修复了它。
have you tried: 你有没有尝试过:
.image_block{
text-align: center;
vertical-align: bottom;
}
#header2
{
display: table-cell;
vertical-align: bottom;
background-color:Red;
}
<div style="text-align:center; height:300px; width:50%;" id="header2">
<div class="right" id="header-content2">
<p>this is a test</p>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.