如何将图像水平居中并同时与容器底部对齐？
我已经能够自行将图像水平居中。我还能够自行对齐容器的底部。但我无法同时做到这两点。
这是我所拥有的：
.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 或更小。
.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>将适当地居中。
这也有效（从这个问题中得到提示）
.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 */
}
不会
margin-left:auto;
margin-right:auto;
添加到.image_block一个img 做的伎俩？
请注意，这在 IE6 中不起作用（也许 7 不确定）
你必须在.image_block容器 Div上做
text-align:center;
position:relative;也可能是个问题。
这很棘手；它失败的原因是你不能在绝对定位时通过边距或文本对齐来定位。
如果图像在 div 中是单独的，那么我推荐这样的东西：
.image_block {
width: 175px;
height: 175px;
line-height: 175px;
text-align: center;
vertical-align: bottom;
}
您可能需要将vertical-align呼叫粘贴在图像上；不测试就不太确定。不过，使用vertical-alignandline-height会比尝试使用绝对定位来更好地对待你。
删除position: relative;线。我不确定为什么，但它为我修复了它。
你有没有尝试过：
.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>