如何将图片对齐到 div 的底部？

Question

我想使用vertical-align将一个图片对齐到外部div元素的底部，但是这个属性好像不起作用，图片没有移动。

 <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类来进行对齐。有没有什么方法可以使图像的

标签与外部

标签底部对齐？这个外部

标签高度为第二个

标签的高度，即300px。

- Nikhil Bharadwaj

---

请提供您的jsfiddle链接或展示您的CSS。 - Ram kumar

duplicate question 这里是另一个链接。 - Kunal Surana

使用Firefox浏览器打开Firebug，查看详细和继承/计算部分中应用/覆盖的属性。先在浏览器中进行调整，然后应用到代码中。 - Gyan

这可能会对你有所帮助：https://dev59.com/vHE85IYBdhLWcg3wzm1p - programingStudentWhaddup94

Answer 1

如果我理解正确，类似以下代码应该可以解决问题：

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

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

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

由于相邻div中的子元素设置了高度，父div似乎总共会有300像素高。如果您指定父元素的高度，则可以将子元素的绝对位置与父元素的尺寸相关联。

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

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

请务必查阅此问题和其他问题的文档，在MDN上有很好的解释。

- denmch

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布局。

- jer0dh

---

我喜欢这个选项的原因是它可以让父元素保持灵活性，并且仍然可以由其子元素进行缩放。 - Vian Esterhuizen