Bootstrap 3中如何垂直对齐图标？

Question

我有一个如下的 glyphicon：

<div class="col-xs-4 col-sm-2">
    <span class="glyphicon glyphicon-circle-arrow-up glyphicon-large"></span>
</div>

.glyphicon-large {
    min-height: 260px;
    font-size: 35px;
    width: 1em;
    display: block;
    top: 50%;
    margin: -0.5em auto 0px;
}

图标无法垂直居中对齐。当我在Firefox中打开检查元素并切换掉/打开50%顶部规则时，它突然起作用。为什么？

- matthijs

Answer 1

浏览器 Bug 解释

根据 MDN 上的top:

对于 相对定位元素（那些具有 position: relative 属性的元素），它指定了元素在正常位置下方移动的距离。
注意: 百分比按照元素包含块的高度应用

根据 W3 上的top:

对于 相对定位 盒子，偏移量是相对于盒子本身的上边缘（即，盒子在正常流中赋予位置，然后根据这些属性进行偏移）。 注意: 百分比是相对于包含块的高度

这是我的猜测：

我认为问题是当 浏览器首次渲染可视树时，并看到 top:50%;，它会查找父级以设置高度。 由于没有明确应用高度，并且它尚未加载任何子内容，因此该 div （以及所有 div）的高度实际上 开始为零，直到另有说明为止。 然后它将字形向下推 50% 的零（即不移动）。

当您稍后切换属性时，浏览器已经渲染了所有内容，因此父容器的计算高度由其子元素的高度提供。

最小、完整和可验证的示例

注意: 这与 Bootstrap 或 Glyphicons 没有任何关系。 为避免对引导程序产生依赖，我们将添加.glyphicon类应用的top:1px。 即使被50%覆盖，它仍然发挥着重要作用。

这是一组简单的父/子元素：

<div id="container">
    <div id="child">Child</div>
</div>

为了更可重复地模拟切换属性，我们可以等待两秒钟，然后在JavaScript中应用样式，如下所示：

window.setTimeout(function() {
    document.getElementById("child").style.top = '50%';
},2000);

示例1 (jsFiddle)

作为起点，让我们重新创建您的问题。

#container {
    position: relative;
    
    /* For Visual Effects */
    border: 1px solid grey;
}
#child {
    position: relative;
    height: 50px;
    top: 1px;
    
    /* For Visual Effects */
    border: 1px solid orange;
    width: 50px;
    margin: 0px auto;
    
}

注意，只要调整窗口大小，浏览器就会重新绘制屏幕并将元素移回顶部。

示例2 (jsFiddle)

如果在子元素中添加top: 50%，则当JavaScript添加该属性时不会发生任何事情，因为它没有任何内容可覆盖。

示例3 (jsFiddle)

如果在子元素中添加top: 49%，那么DOM确实有一些要更新的内容，因此我们会再次遇到奇怪的故障。

示例4 (jsFiddle)

如果将height: 50px;添加到容器而不是子元素，则top属性从一开始就有一些位置参考，您无需在JavaScript中使用切换。

---

如何垂直对齐

如果您只想知道如何始终垂直居中某些内容，则可以执行以下操作：

垂直居中文本的窍门是将line-height设置为容器高度。如果一行占用100像素，而文本在线上占用10个像素，那么浏览器将尝试在剩余的90像素内居中文本，其中45个在顶部和底部。

.glyphicon-large {
    min-height:  260px;
    <b>line-height: 260px;</b>
}

在 jsFiddle 中的解决方法

- KyleMit

---

你绝对可以在relative中使用top。它可能不会做你期望的事情，但实际上它已经明确定义了应该做什么，并且确实做到了这一点。 - Jasper

@Jasper，说得好，你说得对。 我已经更新了答案，并解释了如何在position: relative和top:％一起使用的方法。 - KyleMit

Answer 2

尝试将位于H1标签内部的字形图标居中，这需要一些时间 - 后来我发现实际上可以在包含字形图标的SPAN标签内更改字体大小和颜色。

因此，代码如下：

<h1><span class="glyphicon glyphicon-envelope" style="font-size: 24px; color: #108db7;"></span>&nbsp;Mes Messages</h1>

实际上对我起了作用。

- Rowan

Answer 3

你试过了吗？：

<span class="glyphicon glyphicon-circle-arrow-up glyphicon-large" style="vertical-align:middle"></span> 

- Pixel

---

请注意，这里提出的问题是为什么应用的样式在页面加载时不起作用。但是，在使用浏览器开发工具手动切换top:50%属性后，它会起作用。 (@Ricoxor) - Chris