[英]HTML image bottom alignment inside DIV container
I have a div tag with a fixed height.我有一个固定高度的 div 标签。 Most of the images have the same height and width.
大多数图像具有相同的高度和宽度。
I want to align the images at the bottom of the div so that they are nicely arranged.我想对齐 div 底部的图像,以便它们排列得很好。 Here is what I have so far:
这是我到目前为止所拥有的:
<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-cell
and the vertical-align: bottom
css attributes.我设法将底部的图像与
display: table-cell
和vertical-align: bottom
css 属性对齐。
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 标签底部对齐图像?
Set the parent div as position:relative
and the inner element to position:absolute; bottom:0
将父 div 设置为
position:relative
并将内部元素设置为position:absolute; bottom:0
position:absolute; bottom:0
This is your code: http://jsfiddle.net/WSFnX/这是你的代码: http://jsfiddle.net/WSFnX/
Using display: table-cell
is fine, provided that you're aware that it won't work in IE6/7.使用
display: table-cell
很好,只要您知道它在 IE6/7 中不起作用。 Other than that, it's safe: Is there a disadvantage of using `display:table-cell`on divs?除此之外,它是安全的: 在 div 上使用 `display:table-cell` 有缺点吗?
To fix the space at the bottom, add vertical-align: bottom
to the actual img
s:要固定底部的空间,请将
vertical-align: bottom
添加到实际的img
中:
http://jsfiddle.net/WSFnX/1/ http://jsfiddle.net/WSFnX/1/
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/
Flexboxes can accomplish this by using align-items: flex-end; flex-direction: column;
Flexbox 可以通过使用
align-items: flex-end; flex-direction: column;
align-items: flex-end; flex-direction: column;
with display: flex;
带
display: flex;
or display: inline-flex;
或
display: inline-flex;
div#imageContainer {
height: 160px;
align-items: flex-end;
display: flex;
flex-direction: column;
}
CSS-Tricks has a good guide for flexboxes CSS-Tricks 有一个很好的弹性盒指南
<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 */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.