twitter-bootstrap 如何将图像对齐到 div 的底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35425707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align an image to the bottom of the div?
提问by Nikhil Bharadwaj
I'm trying to align an image to the bottom of the out divelement using vertical-align,but this vertical-aligndoesn't seem to work,the image is not moving at all.
我正在尝试使用 将图像与输出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>
I'm using bootstrap classes for alignments. Is there anything that can make the image divalign to the bottom of the outer div?Which is taking the heightof second divwhich is 300px;.
我正在使用引导程序类进行对齐。有什么可以使图像div与外部底部对齐的div吗？哪个是height秒div的300px;.
回答by denmch
If I understand you correctly, something like this should do the trick:
如果我理解正确，这样的事情应该可以解决问题：
.parent {
position: relative;
height: 300px;
}
.child {
position: absolute;
bottom: 0;
}
You could add those classes to the DIV and the IMG respectively.
您可以分别将这些类添加到 DIV 和 IMG。
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 absolutelyposition the childrelativeto the size of the parent.
看起来父 div 无论如何都会有 300px 高，因为在相邻 div 中的子级上设置了高度。如果您改为指定父项的高度，那么您可以绝对地相对于父项的大小定位子项。
If you don't set the parent as position:relative, then the child will be position relative to something else (like the page).
如果您不将父项设置为 position:relative，则子项将相对于其他内容（如页面）进行定位。
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.
Vertical-align 不起作用，因为 IMG 是一个内联元素，并且您期望的行为取决于表格单元格。对于内联元素，垂直对齐是相对于行而不是父容器，因此与文本对齐的图像将位于相对于给定文本行的不同位置。
Be sure to check the documentation for this and other questions, which is well-explained at MDN.
回答by jer0dh
You can use flexbox for this. Appling the parent styles to the DIV. No extra styling needed for img
您可以为此使用 flexbox。将父样式应用到 DIV。不需要额外的造型img
.parent {
display: flex;
justify-content: flex-end;
flex-direction: column;
}
Here's what you'll want to add if you don't have a taskrunner adding the prefixes for maximum compatibility.
如果您没有 taskrunner 添加前缀以实现最大兼容性，那么您将要添加以下内容。
.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;
}
Currently 97% of the browsers used today support flex.
目前 97% 的浏览器都支持 flex。
