css - 如何在 Bootstrap 3 中垂直对齐文本旁边的图标

Question

我试图将一列中的 Bootstrap 字形与另一列的文本垂直居中。我试过把它当作一张 table ，我试过把它当作一个幽灵单元格(引用:Centering in the unknown)。理想情况下，我喜欢找到我遗漏的不需要表格的东西(我也尝试过)，但现在，我会尝试任何东西。

我发布了一个 example of what I currently have在 bootply 上勾勒出边框以便于查看。

我真的被卡住了，即使在挖掘 StackOverflow 和网络寻找答案之后，非常感谢您的帮助。

Answer 1

您最好使用自己的 css 进行垂直对齐，而不是 Bootstrap 中的任何东西。

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

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

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

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

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