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

Question

我正在尝试使用图像将图像对齐到out div元素的底部vertical-align,但这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>

我正在使用bootstrap类进行对齐.有没有什么可以使图像div对齐到外的底部div？这是采取height的第二个div这是300px;.

Answer 1

如果我理解正确的话,这样的事情就可以解决问题:

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

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

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

看起来父div将是300px高,因为相邻div中的子节点设置了高度.如果您指定父级的高度,那么您绝对可以相对于父级的大小定位子级 .

如果未将父项设置为position:relative,则子项将相对于其他项(如页面)进行定位.

Vertical-align不起作用,因为IMG是一个内联元素,您期望的行为依赖于表格单元格.对于内联元素,垂直对齐是相对于线而不是父容器,因此与文本对齐的图像将位于相对于给定文本行的不同位置.

请务必查看文档以获取此问题和其他问题,这在MDN中有详细说明.

Answer 2

您可以使用 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。