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

时间:2013-05-06 16:38:56

标签: html css twitter-bootstrap

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

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

3 个答案:

答案 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;
}