在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的top说法:

对于相对定位的元素(带有position: relative),它指定元素移动到正常位置以下的量.
注意:百分比是以元素包含块的高度的百分比形式应用的

根据W3的top说法:

对于相对定位的盒子,偏移量相对于盒子本身的顶部边缘(即,盒子在正常流动中被给予一个位置,然后根据这些属性从该位置偏移). 注意:百分比是指包含块的高度

这是我的猜测:

我认为正在发生的事情是,当浏览器首次渲染可视化树并看到时top:50%;,它会向父级设置高度.由于没有专门应用高度,并且它没有加载任何子内容,因此该div(和所有div)的高度有效地从零开始,直到另有指示.然后它将字形按下50%的零.

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

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

注意:这与Bootstrap或Glyphicons没有任何关系.为了避免依赖bootstrap,我们将添加该类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属性可以从get get开始直接定位,并且您不需要在JavaScript中使用切换.

如何垂直对齐

如果您只是想知道如何一致地垂直居中,那么您可以执行以下操作:

垂直居中文本的技巧是设置line-height等于容器高度.如果一行占用100像素,并且在线文本占用10,则浏览器将尝试将文本居中在剩余的90像素中,顶部和底部为45.

.glyphicon-large {
    min-height:  260px;
    line-height: 260px;
}

解决方案在jsFiddle中