DIV 容器内的 HTML 图像底部对齐
Posted
技术标签:
【中文标题】DIV 容器内的 HTML 图像底部对齐【英文标题】:HTML image bottom alignment inside DIV container 【发布时间】:2011-09-25 03:26:42 【问题描述】:我有一个固定高度的 div 标签。大多数图像具有相同的高度和宽度。
我想对齐 div 底部的图像,以便它们排列得很好。这是我目前所拥有的:
<div id="randomContainer">
<div id="imageContainer">
<img src="1.png" />
<img src="2.png" />
<img src="3.png" />
<img src="4.png" />
</div>
<div id="navigationContainer">
<!-- navigation stuff -->
</div>
</div>
CSS 看起来像:
div#imageContainer
height: 160px;
vertical-align: bottom;
display: table-cell;
我设法将底部的图像与display: table-cell
和vertical-align: bottom
css 属性对齐。
有没有更简洁的方式将 div 显示为表格单元格并在 DIV 标签底部对齐图像?
【问题讨论】:
【参考方案1】:设置父div为position:relative
,内部元素为position:absolute; bottom:0
【讨论】:
这仅在您设置容器的高度时才有效。【参考方案2】:这是你的代码:http://jsfiddle.net/WSFnX/
使用display: table-cell
很好,前提是您知道它在 IE6/7 中不起作用。除此之外,它是安全的:Is there a disadvantage of using `display:table-cell`on divs?
要修复底部的空间,请将vertical-align: bottom
添加到实际的img
s:
http://jsfiddle.net/WSFnX/1/
删除图像之间的空间归结为:bikeshedding CSS3 property alternative?
因此,这是一个在 html 中删除了空格的演示:http://jsfiddle.net/WSFnX/4/
【讨论】:
【参考方案3】:Flexbox 可以通过使用 align-items: flex-end;
和 display: flex;
或 display: inline-flex;
来实现这一点
div#imageContainer
height: 160px;
align-items: flex-end;
display: flex;
/* This is the default value, so you only need to explicitly set it if it's already being set to something else elsewhere. */
/*flex-direction: row;*/
JSFiddle example
CSS-Tricks has a good guide for flexboxes
【讨论】:
我认为你不需要flex-direction: column;
部分;很适合我!
由于您将 flex-direction 从默认的 row
更改为 column
,align-items
属性现在用于水平对齐子级。您应该从上述代码中删除 flex-direction
属性或将 align-items
更改为 justify-content
不知何故这个答案搞砸了:曾经存在的flex-direction: column;
永远不会工作,但必须是flex-direction: row;
,jsfiddle上的示例从不包括flex-properties,而是display: table-cell
。尽管如此,这个答案解决了我的问题,因此投票赞成。
Stnge @David,感谢您指出这一点。看起来 JSFiddle 忘记了我真正的小提琴,然后有人点击了链接并创建了另一个小提琴来覆盖我的?我会更新 JSFiddle。
另请注意@David,flex-direction: row;
是默认值,因此除非其他一些 css 设置它,否则您可以将其留空,它的行为将与 flex-direction: row;
一样。【参考方案4】:
<div>
有些比例
div
position: relative;
width: 100%;
height: 100%;
<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 */
【讨论】:
这个方案很遗憾,当外层容器/视口的宽度发生变化时非常容易出错。以上是关于DIV 容器内的 HTML 图像底部对齐的主要内容,如果未能解决你的问题,请参考以下文章