如何水平居中放置图像并将其与容器底部alignment？
我怎样才能水平居中图像，并同时alignment到容器的底部？
我已经能够自己水平的中心的形象。 我也已经能够通过自己对准容器的底部。 但是我没能同时做到这一点。
这是我有什么：
.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> 该代码将图像alignment到div的底部。 我需要添加/更改，以使它也在水平中心图像的div内？ 图像大小在手之前是不知道的，但它将是175×175或更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显示，所以我们可以离开那里的相对定位。
因此， <a>元素将相对于.image_block ，这将给我们底部alignment。 然后，我们使用text-align: center将<a>元素text-align: center ，并给它一个100％的宽度，这样它的大小就是.image_block 。
然后<a>的<img>将适当居中。
这也行得通（从这个问题提示）
.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 */ }
这是棘手的; 它失败的原因是你不能通过边距或文本alignment，而绝对定位。
如果图片是独立的div，那么我推荐这样的东西：
.image_block { width: 175px; height: 175px; line-height: 175px; text-align: center; vertical-align: bottom; }
您可能需要在图像上粘贴vertical-align调用; 不确定没有testing它。 然而，使用vertical-align和line-height将会比对待绝对定位要好得多。
不会
margin-left:auto; margin-right:auto;
添加到.image_block一个IMG做的伎俩？
请注意，这将无法在IE6（也许7不知道）
在那里你将不得不做的.image_block容器.image_block
text-align:center;
position:relative; 可能也是一个问题。
移除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>
