[英]Vertical-align doesn't work (with table-cell display)
I have this code: http://jsfiddle.net/5qLDz/ inside which I want to have images vertically aligned to bottom of the container (with some padding from container itself). 我有这个代码: http : //jsfiddle.net/5qLDz/里面我希望图像垂直对齐到容器的底部(从容器本身有一些填充)。 It doesn't work even with
li
having display: table-cell
and both li
and img
having vertical-align:bottom
set. 即使
li
具有display: table-cell
以及li
和img
都有vertical-align:bottom
set,它也不起作用。 What can it be? 它能是什么?
Please stop posting solutions using position: absolute
. 请停止使用
position: absolute
发布解决方案。 As you can see in my code, I used text-align: center
which is important there. 正如您在我的代码中看到的,我使用了
text-align: center
,这在那里非常重要。
One simple fix is to set the line-height to be the same as the container 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;
}
That seems to work, http://jsfiddle.net/audetwebdesign/5qLDz/20/ 这似乎有效, http://jsfiddle.net/audetwebdesign/5qLDz/20/
You only need to declare vertical-align: bottom
on the img
rule. 您只需要在
img
规则上声明vertical-align: bottom
。
However, if you add other elements like captions or social media links this could affect how you implement the solution. 但是,如果添加其他元素(如标题或社交媒体链接),则可能会影响您实施解决方案的方式。
For the love of god don't use display:table-cell
just to vertically align something. 对于上帝的爱,不要使用
display:table-cell
只是为了垂直对齐的东西。 Just using relative positioning will also do this far more easily: forked Fiddle . 只使用相对定位也会更容易做到这一点: 分叉小提琴 。
Only changed the parent to position:relative
and the child to position:absolute
. 仅将父级更改为
position:relative
,将子级更改为position:absolute
。
Update your CSS: 更新你的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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.