如何垂直对齐Bootstrap 3

Question

我试图将一个Bootstrap glyphicon与另一列的文本垂直居中。我已经尝试过把它作为一张桌子，我已经尝试过它作为幽灵细胞（参考：Centering in the unknown）。理想情况下，我希望找到一些我不想要的东西，不需要桌子（我也尝试过），但就目前而言，我会尝试任何东西。

我已经在bootply上发布了example of what I currently have并概述了边框以便于查看。

我真的陷入困境，即使在挖掘了StackOverflow和网络以获得答案之后，非常感谢你的帮助。

Answer 1

最好使用自己的css进行垂直对齐，而不是使用bootstrap。

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

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

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

默认情况下，Bootstrap列不会填充行高。在“关于”部分中，这意味着左侧的div = class =“col-sm-3 outline”与右侧列的高度不同。

这article解释了如何做到这一点。