我有这样的代码:http://jsfiddle.net/5qLDz/我想让图像垂直对齐到容器的底部(从容器本身有一些填充)。即使li
display: table-cell
li
和img
设置为vertical-align:bottom
,它也不起作用。它能是什么?
请停止使用position: absolute
发布解决方案。正如您在我的代码中看到的那样,我使用了text-align: center
,这在那里非常重要。
答案 0 :(得分:3)
一个简单的解决方法是将line-height设置为与容器高度相同:
ul.thumbnails li {
box-sizing: border-box;
text-align: center;
background: grey;
padding-bottom: 22px;
height: 222px;
line-height: 222px;
display: table-cell;
}
ul.thumbnails li img {
border-radius: 5px;
bottom: 22px;
vertical-align: bottom;
}
这似乎有效,http://jsfiddle.net/audetwebdesign/5qLDz/20/
您只需在vertical-align: bottom
规则上声明img
即可。
但是,如果您添加其他元素(如字幕或社交媒体链接),则可能会影响您实施解决方案的方式。
答案 1 :(得分:0)
对于上帝的爱,不要仅使用display:table-cell
来垂直对齐某些东西。只使用相对定位也可以更轻松地做到这一点:forked Fiddle。
仅将父级更改为position:relative
,将子级更改为position:absolute
。
答案 2 :(得分:0)
更新你的CSS:
div.left section.box ul.thumbnails {
margin: 0;
padding: 0;
}
ul.thumbnails li {
text-align: center;
background: grey;
height: 222px;
position:relative;
}
ul.thumbnails li img {
border-radius: 5px;
bottom: 22px;
position:absolute;
}