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

时间:2016-02-16 06:53:21

标签: html css twitter-bootstrap css3

我正在尝试使用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的{​​{1}} div 300px;

2 个答案:

答案 0 :(得分:7)

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

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

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

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

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

如果你没有将父母设置为position:relative,那么孩子将相对于其他东西(如页面)定位。

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

请务必查看文档以获取此问题和其他问题,即well-explained at MDN

答案 1 :(得分:4)

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