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

浏览器Bug说明

根据MDN on top：

根据W3 on top：

这是我的猜测：

我认为发生的是,当browser is first rendering the visual tree,并看到顶部：50％;它看起来要父母设置高度.由于没有特别应用高度,并且没有加载任何子内容,所以div(和所有div)的高度有效地开始为零直到另外指出.然后,将字形按下50％的零.

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

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

注意：这与Bootstrap或Glyphicons没有任何关系.为了避免依赖引导,我们将添加将由.glyphicon类应用的top：1px.即使被50％的覆盖,仍然起着重要的作用.

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

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

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

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

示例1：

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

@H_607_2@#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.

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

Demo in jsFiddle