将图像垂直对齐到 div 标签的底部答案

【问题标题】：Vertically aligning an image to the bottom of a div tag将图像垂直对齐到 div 标签的底部
【发布时间】：2016-02-15 18:30:42
【问题描述】：

<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;}

垂直对齐：底部；不起作用。我需要将天气小部件图像与底部对齐。有什么解决办法吗？找到附加的图像。

编辑：我已将 column2_SS 的背景颜色设置为黑色。如果图像底部对齐，则背景颜色不应为黑色。见附图。图像下方有一个黑色行，表示图像未底部对齐。

【问题讨论】：

您能否向我们展示您目前的作品是什么样的，并说明您希望它的外观如何？图片本身并不真正相关
@Glubus 查看编辑
你检查过图片的大小了吗？也许它有一小块透明的像素，或者一个边距，或者类似的东西。也许你的 div 继承了底部填充
@Glubus 位置：绝对；在这里工作正常。谢谢
在这种情况下不使用垂直对齐。

标签： html css

【解决方案1】：

您可以使用position: absolute 并使用上/下/左/右值来相对于其父元素定位元素。 vertical-align 主要用于内联元素或表格单元格 (read more on 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>

【讨论】：

【解决方案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;
}

此外，绝对定位也可以正常工作，但我总是将其用作最后一个选项，因为在某些设备上会出现“跳跃”行为。

【讨论】：