Question

我有这样的代码：http://jsfiddle.net/5qLDz/我想让图像垂直对齐到容器的底部（从容器本身有一些填充）。即使li display: table-cell li和img设置为vertical-align:bottom，它也不起作用。它能是什么？

请停止使用position: absolute发布解决方案。正如您在我的代码中看到的那样，我使用了text-align: center，这在那里非常重要。

Answer 1

一个简单的解决方法是将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即可。

但是，如果您添加其他元素（如字幕或社交媒体链接），则可能会影响您实施解决方案的方式。

Answer 2

对于上帝的爱，不要仅使用display:table-cell来垂直对齐某些东西。只使用相对定位也可以更轻松地做到这一点：forked Fiddle。

仅将父级更改为position:relative，将子级更改为position:absolute。

Answer 3

更新你的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;
}

垂直对齐不起作用（带有表格单元格显示）

3 个答案: