Question

我正在尝试使用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;。

Answer 1

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

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

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

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

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

如果你没有将父母设置为position：relative，那么孩子将相对于其他东西（如页面）定位。

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

请务必查看文档以获取此问题和其他问题，即well-explained at 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。

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

2 个答案: