对齐div的图像底部

Question

我正在尝试格式化图像，使其与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; }  

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

感谢您的帮助！

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

Answer 2

我认为这是因为使用display：div元素的inline-block。内联块规则始终为元素添加5px边距。因此，如果您将其删除the issue will be fixed。如果您需要该规则，可以add -5px bottom margin。