css – 引导中的垂直对齐字形3

我有一个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％的规则,它突然工作.怎么来的？

解决方法

浏览器Bug说明

根据MDN on top：

For relatively positioned elements (those with position: relative),it specifies the amount the element is moved below its normal position.
Note: Percentage is applied as a percentage of the height of the element’s containing block

根据W3 on top：

For relatively positioned Boxes,the offset is with respect to the top edges of the Box itself (i.e.,the Box is given a position in the normal flow,then offset from that position according to these properties).
Note: Percentages refer to height of containing block

这是我的猜测：

我认为发生的是,当browser is first rendering the visual tree,并看到顶部：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：

作为起点,让我们重新创建你的问题.

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

}

Example 1 in Fiddle

请注意,一旦您调整窗口大小,浏览器将重新绘制屏幕并将元素移回顶部.

实施例2

如果您添加顶部：50％的子元素,当JavaScript添加属性时,将不会发生任何事情,因为它不会有任何要覆盖的东西.

Example 2 in Fiddle

实施例3

如果您添加顶部：49％的子元素,那么DOM确实有更新的东西,所以我们会再次遇到奇怪的故障.

Example 3 in Fiddle

实施例4

如果添加height：50px;到容器,而不是孩子,那么顶级属性有一些位置反对,而不需要在JavaScript中使用切换.

Example 4 in Fiddle

如何垂直对齐

如果您只想知道如何垂直居中的东西,那么您可以执行以下操作：

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

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

Demo in jsFiddle

css – 引导中的垂直对齐字形3

解决方法

相关文章