html - 对齐div的图像底部

Question

我正在尝试格式化图像，使其与 div 的底部对齐。我把我认为是相关的代码放在一个 fiddle 里: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>