Question

如何将图像水平居中并同时对齐容器底部？

我已经能够将图像水平居中。我也能够通过它自己对齐容器的底部。但我无法同时做到这两点。

这就是我所拥有的：

.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内水平居中？图像尺寸在手前是未知的，但它将是175x175或更低。

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

说明：绝对定位的元素将相对于具有非静态定位的最近父级。我假设你对.image_block显示的方式感到满意，所以我们可以在那里保留相对位置。

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

<img>中的<a>将适当居中。

Answer 2

这也有效（从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 */ 
}

Answer 3

不会

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

添加到.image_block一个img做诀窍？
请注意，这在IE6中不起作用（可能7不确定）
你必须在.image_block容器Div

上做

text-align:center;

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

Answer 4

这很棘手;它失败的原因是你无法通过边距或文本对齐来定位。

如果div中的图像是单独的，那么我推荐这样的东西：

.image_block {
    width: 175px;
    height: 175px;
    line-height: 175px;
    text-align: center;
    vertical-align: bottom;
}

您可能需要在图片上粘贴vertical-align电话;不测试就不太确定。但是，使用vertical-align和line-height会比你更好地对待你，而不是试图解决绝对定位问题。

Answer 5

删除position: relative;行。我不确定为什么，但它确定了它。

Answer 6

你试过了吗？

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

Answer 7

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

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

7 个答案: