Question

我正在尝试使用Bootstrap 3中相当简单的东西，但无法弄清楚如何使它工作。

目标是获得一个网格行，其中第一个元素具有小图像（50x50）和大高度（300）。行中的其余元素应该是相同的高度（300px），但它们的宽度是根据网格/文本调整的。

HTML：

<div class="container">
    <div class="row">
        <div class="col-md-1 icon vcenter"><img src='http://placehold.it/50x50' /></div>
        <div class="col-md-3 vcenter" ><p>Element1</p></div>
        <div class="col-md-3 vcenter" ><p>Element2</p></div>
        <div class="col-md-3 vcenter" ><p>Element3</p></div>
        <div class="col-md-1 vcenter" ><p>Element4</p></div>
    </div>
</div>

CSS：

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

.icon {
    display:table;
    height: 300px;
    border-collapse: separate;
}

但我无法弄清楚如何将图标放到网格元素的中心。有什么建议？我的大多数代码都是从StackOverflow上的其他想法中提取的，但没有任何帮助。

Answer 1

由于您的问题的约束涉及固定的高度，这是一个相对简单的问题。只需将列设置为固定高度：

.row > div {
  height: 300px;
}

然后要实现垂直居中，请在列上使用display: table，并在子级上使用display: table-cell vertical-align: middle：

.vcenter {
    display: table;
}
.vcenter p {
    display: table-cell;
    vertical-align: middle;
}

请参阅：http://jsfiddle.net/fL7xpw67/3/

请注意，我必须在标记的<p>列中添加.icon元素。

Bootstrap 3网格行 - 中心对齐图像和文本

1 个答案: