對齊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

我認為這是因為對div元素使用display：inline-block。 內聯阻止規則始終向元素添加5px的邊距。 因此，如果將其刪除， 該問題將得到解決 。 如果您需要該規則，則可以添加-5px底邊距 。