如何在 Bootstrap 3 中使图标与文本垂直对齐

Question

3

我正在尝试垂直居中一个Bootstrap glyphicon，使其与另一列的文本对齐。我试过将其作为表格来处理，也试过作为ghost cell（参考：在未知情况下居中）。理想情况下，我希望找到不需要表格的解决方法（我也试过了），但现在我会尝试任何方法。

我在bootply上发布了一个示例，并为了方便查看而勾画了边框。

我真的卡住了，即使在StackOverflow和网络上寻找答案后仍无法解决，非常感谢您的帮助。

- hrokr

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RBdorf · Accepted Answer

使用自己的 CSS 实现垂直居中会比使用 Bootstrap 更好。

您可以使用以下组合将元素在其父元素中垂直居中：

.vertically-centered {
    position: relative;
    top:50%;
    transform: translateY(-50%);
}

这是因为给translateX设置的百分比是相对于元素大小的。

Bootstrap列默认不填充行高。在您的关于部分中，这意味着左侧带有class="col-sm-3 outline"的div与右侧列的高度不同。

这篇文章解释了如何做到这一点。