CSS 如何将图像水平居中并将其与容器底部对齐？

How to center an image horizontally and align it to the bottom of the container?

提问by Echo says Reinstate Monica

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.

该代码将图像与 div 的底部对齐。我需要添加/更改什么才能使其在 div 内水平居中图像？图像尺寸事先未知，但将是 175x175 或更小。

回答by Owen

.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_blockdisplays, 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. then, we text-align: centerthe <a>element, and give it a 100% width so that it is the size of .image_block.

因此，<a>元素将相对于 定位.image_block，这将为我们提供底部对齐。然后，我们text-align: center将<a>元素设置为 100% 宽度，使其大小为.image_block.

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

所述<img>内<a>然后将集中适当。

回答by vdua

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 */ 
}

回答by Pim Jager

wouldn't

不会

margin-left:auto;
margin-right:auto;

added to the .image_blocka img do the trick?
Note that that won't work in IE6 (maybe 7 not sure)
there you will have to do on .image_blockthe container Div

添加到.image_block一个 img 就行了？
请注意，这在 IE6（也许 7 不确定）中不起作用，
您必须.image_block在容器 Div 上执行

text-align:center;

position:relative;could be a problem too.

position:relative;也可能是个问题。

回答by One Crayon

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-aligncall on the image instead; not really sure without testing it. Using vertical-alignand line-heightis going to treat you a lot better, though, than trying to mess around with absolute positioning.

您可能需要将vertical-align调用粘贴在图像上；没有测试就不太确定。但是，与尝试使用绝对定位相比，使用vertical-alignandline-height会更好地对待您。

回答by dfortun

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

回答by Jeremy Ruten

Remove the position: relative;line. I'm not sure why exactly but it fixes it for me.

删除position: relative;线。我不确定为什么会这样，但它为我修复了它。

回答by workmad3

have you tried:

你有没有尝试过：

.image_block{
text-align: center;
vertical-align: bottom;
}