DIV 容器内的 HTML 图像底部对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6520940/
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
HTML image bottom alignment inside DIV container
提问by Patric
I have a div tag with a fixed height. Most of the images have the same height and width.
我有一个固定高度的 div 标签。大多数图像具有相同的高度和宽度。
I want to align the images at the bottom of the div so that they are nicely arranged. Here is what I have so far:
我想在 div 底部对齐图像，以便它们很好地排列。这是我到目前为止所拥有的：
<div id="randomContainer">
<div id="imageContainer">
<img src="1.png" alt=""/>
<img src="2.png" alt=""/>
<img src="3.png" alt=""/>
<img src="4.png" alt=""/>
</div>
<div id="navigationContainer">
<!-- navigation stuff -->
</div>
</div>
The CSS looks like:
CSS看起来像：
div#imageContainer {
height: 160px;
vertical-align: bottom;
display: table-cell;
}
I managed to align the images at the bottom with display: table-celland the vertical-align: bottomcss attributes.
我设法在与底部对齐图像display: table-cell和vertical-align: bottomCSS属性。
Is there a cleaner way as displaying the div as table-cell and aligning the images at the bottom of the DIV tag?
有没有更简洁的方法来将 div 显示为表格单元格并在 DIV 标签的底部对齐图像？
回答by sekmo
Set the parent div as position:relativeand the inner element to position:absolute; bottom:0
将父 div 设置为position:relative，将内部元素设置为position:absolute; bottom:0
回答by thirtydot
This is your code: http://jsfiddle.net/WSFnX/
这是你的代码：http: //jsfiddle.net/WSFnX/
Using display: table-cellis fine, provided that you're aware that it won't work in IE6/7. Other than that, it's safe: Is there a disadvantage of using `display:table-cell`on divs?
使用display: table-cell很好，前提是您知道它在 IE6/7 中不起作用。除此之外，它是安全的：在 div 上使用 `display:table-cell` 有什么缺点吗？
To fix the space at the bottom, add vertical-align: bottomto the actual imgs:
要修复底部的空间，请添加vertical-align: bottom到实际的imgs：
Removing the space between the images boils down to this: bikeshedding CSS3 property alternative?
删除图像之间的空间归结为：bikeshedding CSS3 属性替代？
So, here's a demo with the whitespace removed in your HTML: http://jsfiddle.net/WSFnX/4/
所以，这里有一个演示，在你的 HTML 中删除了空格：http: //jsfiddle.net/WSFnX/4/
回答by Daniel
Flexboxes can accomplish this by using align-items: flex-end;with display: flex;or display: inline-flex;
Flexbox 可以通过使用align-items: flex-end;withdisplay: flex;或display: inline-flex;
div#imageContainer {
height: 160px;
align-items: flex-end;
display: flex;
}
回答by comonitos
<div>with some proportions
<div>有一定的比例
div {
position: relative;
width: 100%;
height: 100%;
}
<img>'s with their own proportions
<img>有自己的比例
img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: auto; /* to keep proportions */
height: auto; /* to keep proportions */
max-width: 100%; /* not to stand out from div */
max-height: 100%; /* not to stand out from div */
margin: auto auto 0; /* position to bottom and center */
}
