如何将图像对齐div的底部？ [英] How to align an image to the bottom of the div?

问题描述

我试图使用 vertical-align 将图像对齐到 div 元素的底部，但这 vertical-align 似乎不起作用，图像根本不动。

I'm trying to align an image to the bottom of the out div element using vertical-align,but this vertical-align doesn't seem to work,the image is not moving at all.

 <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 这是 300px; 。

I'm using bootstrap classes for alignments. Is there anything that can make the image div align to the bottom of the outer div?Which is taking the height of second div which is 300px;.

推荐答案

如果我正确地理解了你的话，像这样的事情应该可以做到这一点：

If I understand you correctly, something like this should do the trick:

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

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

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

You could add those classes to the DIV and the IMG respectively.

无论如何，它看起来像父级div将高300px，因为相邻div中的子级设置了高度。如果您指定父级的高度，那么您可绝对将子级 相对定位到父级的大小 em>。

It looks like the parent div will be 300px high anyway because of the height set on the child in the adjacent div. If you specify the height of the parent instead, then you can absolutely position the child relative to the size of the parent.

如果您没有将父级设置为position：relative，那么该子级将相对于其他位置（如页面）的位置。

If you don't set the parent as position:relative, then the child will be position relative to something else (like the page).

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

Vertical-align won't work because the IMG is an inline element, and the behavior you're expecting is table-cell dependent. With inline elements, vertical alignment is relative to the line and not to the parent container, so that an image aligned with text would sit in various positions relative to a given line of text.

一定要检查文档中的这个问题和其他问题，它是在MDN上详细解释。

Be sure to check the documentation for this and other questions, which is well-explained at MDN.

这篇关于如何将图像对齐div的底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！