如何将图像与 div 的底部对齐？答案

【问题标题】：How to align an image to the bottom of the div?如何将图像与 div 的底部对齐？
【发布时间】：2016-05-27 07:51:54
【问题描述】：

我正在尝试使用vertical-align 将图像与div 元素的底部对齐，但是这个vertical-align 似乎不起作用，图像根本没有移动。

 <div class="row">
     <div class="col-md-1">
       <img src="../images/image.png" style="height: 20px; width: 20px;cursor:pointer"/>
     </div>
     <div class=col-md-11 >
        <div  style="overflow:auto;height:300px"></div>
     </div>
</div>

我正在使用引导类进行对齐。有什么可以使图像div 与外部div 的底部对齐吗？哪个是第二个div 的height，即300px;。

【问题讨论】：

请制作 jsfiddle 链接或显示您的 css 也
duplicate question 这里是anotherlink
使用 firefox - 打开 Firebug - 查看详细和继承/计算部分下正在应用/覆盖的属性。先在浏览器中调整，然后再应用到代码中。
stackoverflow.com/questions/2603700/… 这可能对您有所帮助

标签： html twitter-bootstrap css

【解决方案1】：

您可以为此使用 flexbox。将父样式应用于 DIV。 img 不需要额外的样式

.parent {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

如果您没有添加前缀以获得最大兼容性的任务运行程序，这就是您想要添加的内容。

.parent {    
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
            -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column; 
}

目前使用的 97% 的浏览器都支持 flex。

【讨论】：

我更喜欢这个选项的原因是它允许父级保持灵活性并且仍然可以由它的子级缩放。

【解决方案2】：

如果我理解正确的话，这样的事情应该可以解决问题：

.parent {
  position: relative;
  height: 300px;
}

.child {
  position: absolute;
  bottom: 0;
}

您可以将这些类分别添加到 DIV 和 IMG。

由于相邻 div 中子元素的高度设置，看起来父 div 无论如何都会有 300px 高。如果您改为指定父级的高度，那么您可以绝对定位子级相对到 父级的大小 em>。

如果您不将父级设置为 position:relative，则子级将相对于其他对象（例如页面）进行定位。

垂直对齐不起作用，因为 IMG 是内联元素，并且您期望的行为取决于表格单元格。对于内联元素，垂直对齐是相对于行而不是父容器，因此与文本对齐的图像将位于相对于给定文本行的不同位置。

请务必查看有关此问题和其他问题的文档，即well-explained at MDN。

【讨论】：