將圖像垂直對齊到div標簽的底部

Question

<div class = "column2_SS">
 <img class = "weather_widget" src = "images/weather.png" alt = "Smiley face">
</div>

CSS代碼：

.column2_SS{
background-color: #f2f7fc;
float: right;
height: 171px;
width: 300px;
background-color: black;  /*#444444*/
margin-top: 20px;
margin-right: 100px;
border-radius: 7px;
vertical-align: bottom;}

.weather_widget{
vertical-align: bottom;}

vertical-align：bottom; 不起作用。 我需要將天氣小部件圖像對齊到底部。 有解決方案嗎 找到附加的圖像。

編輯：我已將column2_SS的背景顏色設置為黑色。 如果圖像底部對齊，則背景顏色不應為黑色。 請參見附圖。 圖像下方有一個黑色的行，這意味着圖像不是底部對齊的。

Answer 1

您可以使用position: absolute和使用top / bottom / left / right值來定位元素相對於其父元素的position: absolute 。 vertical-align主要用於內聯元素或表格單元格（ 在MDN上閱讀更多內容 ）。

 .column2_SS { background-color: #f2f7fc; float: right; height: 271px; width: 300px; background-color: black; margin-top: 20px; margin-right: 100px; border-radius: 7px; position: relative; } .weather_widget { position: absolute; bottom:0; } 

 <div class="column2_SS"> <img class="weather_widget" src="http://i.stack.imgur.com/iU1rX.png" alt="Smiley face"> </div> 

Answer 2

好吧，網上有一個經典的修復方法，創建表格標記......

<div class="table">
    <div class="table-cell">
        <img src="path/to/your/img.jpg">
    </div>
</div>

.table {
    display: table;
}

.table-cell {
    display: table-cell;
    vertical-align: bottom;
}

此外，絕對定位可以正常工作，但我總是將它作為最后一個選項，因為某些設備上的“跳躍”行為。