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不能保持单元格宽度等于col-值，就好像表格布局设置为自动（请尝试用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;
}

Answer 2

看起来我找到了解决方案。显然，img标签打破了布局。 .img-reponsive已将max-width设置为100％，但其width未在CSS中定义。如果我将宽度设置为100％，它就可以正常工作。

.img-responsive {
   width: 100%;
}

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

2 个答案: