html - 垂直对齐不起作用（使用表格单元格显示）

Question

我有这个代码： http: //jsfiddle.net/5qLDz/在里面我想让图像垂直对齐到容器的底部（容器本身有一些填充）。li即使拥有display: table-celland bothli和imghave vertical-align:bottomset ，它也不起作用。会是什么？

请停止使用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;
}