在bootstrap 3中垂直对齐glyphicon

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;
}

glyphicon不会垂直对齐中心。当我打开firefox，检查元素，并关闭/开启top 50%规则时，它突然起作用。怎么样？

Answer 1

浏览器错误说明

根据MDN on top：

  

对于相对定位的元素（带position: relative的元素），指定元素移动到正常位置以下的数量。
  注意：百分比应用为包含块的元素高度的百分比

根据W3 on top：

  

对于相对定位的框，偏移量相对于框本身的顶部边缘（即，框在正常流程中被赋予一个位置，然后根据这些位置从该位置偏移属性）。   注意：百分比是指包含块的高度

这是我的猜测：

我认为发生的事情是browser is first rendering the visual tree，并看到top:50%;，它会向父母设置高度。由于没有专门应用任何高度，并且它没有加载任何子内容，因此该div（和所有div）的高度开始为零，直到另有指示。然后它将字形按下50％的零。

稍后切换属性时，浏览器已经呈现了所有内容，因此父容器的计算高度由其子项的高度提供。

最小，完整且可验证的示例

注意：这与Bootstrap或Glyphicons没有任何关系。为了避免依赖引导程序，我们将添加top: 1px类应用的.glyphicon。即使它被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;
    line-height: 260px;
}

Solution in jsFiddle

Answer 2

尝试将H1标签内的字形图标居中，这需要一段时间 - 所以我发现你实际上可以改变SPAN标签中包含字形的字体大小和颜色。

因此：

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

实际上对我有用。

Answer 3

你尝试过吗？ ：

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