Question

是的伙计们，这是另一个垂直对齐的问题！我正在尝试使用Bootstrap 3做一些非常简单的事情，但是在它上面打了一堵墙。我正在建立对此related question的答案，但遇到了下面描述的问题。

这是标记：

<div class="container">
  <div class="row">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
      <img src="http://www.vectortemplates.com/raster/batman-logo-big.gif">
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
      <img src="http://www.vectortemplates.com/raster/superman-logo-012.png">
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
      <img src="http://2.bp.blogspot.com/-91OnmwoX5t0/T8reMB25ReI/AAAAAAAACQQ/D_jlmi6vWTw/s1600/GREEN+LANTERN+LOGO.png">
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
      <img src="http://ecx.images-amazon.com/images/I/41biZJowGyL._SY300_.jpg">
    </div>
  </div>
</div>

CSS：

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

img {
  max-width:200px;
}

当“float：none;”时包含在.vcenter中，图像根据需要垂直对齐。但是，第四列包裹在另外三列之下。

当“float：none;”时注释掉了，实现了4列布局，但图像没有垂直对齐。

Bootply示例，以便您可以看到我的意思。

知道如何获得四列布局和垂直对齐的图像吗？

Answer 1

问题是display：inline-block考虑了空白区域。如果将列div放在每个旁边没有新的段落空格，它将正确排列。所以它最终会像这样：

<div class="container">
  <div class="row">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
      <img src="http://www.vectortemplates.com/raster/batman-logo-big.gif">
    </div><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
      <img src="http://www.vectortemplates.com/raster/superman-logo-012.png">
    </div><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
      <img src="http://2.bp.blogspot.com/-91OnmwoX5t0/T8reMB25ReI/AAAAAAAACQQ/D_jlmi6vWTw/s1600/GREEN+LANTERN+LOGO.png">
    </div><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
      <img src="http://ecx.images-amazon.com/images/I/41biZJowGyL._SY300_.jpg">
    </div>
  </div>
</div>

有关详细信息，请参阅：

Stackoverflow: css - two inline-block, width 50% elements don't stack

CSS-Tricks: Fighting the Space Between Inline Block Elements

Answer 2

Bootstrap 3中的浮点数有助于解释它们过于庞大的几个像素。要解决这个问题，你只需要稍微调整边距：

.vcenter .col-xs-3, .vcenter .col-sm-3, .vcenter .col-md-3, .vcenter .col-lg-3 {
    margin: 0px -2px;
}

希望这有帮助！

使用Bootstrap 3以4列布局垂直对齐图像

2 个答案: