html - 使用 Bootstrap 垂直居中列内容 - 表格布局问题

Question

我将 Bootstrap 列转换为表格单元格，以便轻松地垂直对齐其内容:

<div class="container">
  <div class="row">
    <div class="col-xs-4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div class="col-xs-4">
      <img src="..." class="img-responsive" alt="...">
    </div>
    <div class="col-xs-4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </div>
</div>

html, body, .container, .row, [class*="col-"] {
  height: 100%;
}
.row {
  display: table;
  table-layout: fixed;
}
[class*="col-"] {
  display: table-cell;
  float: none;
}

https://jsfiddle.net/hm7p9vjw/2/

在 Chrome 中一切都很好，但是 IE 和 FF 不会使单元格宽度等于列值，它就像表格布局设置为自动一样工作(请尝试用 IE 或 FF 打开它以明白我的意思)。

有什么我想念的吗？

Answer 1

如果您更改 bootstrap css 行 1134 并将 max-width 更改为 width，则 moz 和 chrome 中的渲染是相同的，并且图像像在 chrome 中一样很好地居中。

最终代码应该是这样的

.carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img {
    display: block;
    width: 100%;
    height: auto;
}