对齐div的图像底部答案

【问题标题】：Aligning image bottom of div对齐div的图像底部
【发布时间】：2014-08-05 15:30:21
【问题描述】：

我正在尝试格式化图像，使其与 div 的底部对齐。我把我认为的相关代码放在了小提琴中：http://jsfiddle.net/5KEyD/

<div id="main">
<div style="display: inline-block; margin-left: 15px">
<div id="imageWrapper">
<img id="bottomImage" class="aligncenter" src="Bottom-Text.png" alt="Some Image" width="800" height="152" /></div>    </div></div> 

#main{width:800px; height: 200px; padding-right:40px; overflow:hidden; background-    color: #c0c0c0;}
#imageWrapper { position: relative; height: 152px; } /* height is for display purposes only */
#bottomImage { position: absolute; bottom: 0px; }

我需要的是图像在底部一直对齐（居中），下面没有额外的灰色空间。

感谢您的帮助！

【问题讨论】：

一切正常。 #imageWrapper 的高度为 182px，图像的高度为 182px。图片绝对位于底部。
设置 main 的高度与 #imageWrapper 的高度相同

标签： html css wordpress alignment

【解决方案1】：

<div style="width: 800px; margin: 0 auto;">
    <div id="imageWrapper">
        <img id="bottomImage" class="aligncenter" src="/wp-content/uploads/2014/05/Bottom-Text.png" alt="Some Image" width="800" height="152">
    </div>
</div>

【讨论】：

【解决方案2】：

我认为这是因为对 div 元素使用 display: inline-block 造成的。内联块规则总是为元素添加 5px 边距。所以如果你删除它the issue will be fixed。如果您需要该规则，您可以add -5px bottom margin。

【讨论】：

哦，我不知道 inline-block 添加了 5px 边距。很高兴知道！感谢您的帮助！