<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％的规则,它突然工作.怎么来的？
解决方法
根据MDN on top：
For @H_404_16@relatively positioned elements (those with
position: relative),it @H_404_16@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 @H_404_16@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;
}
请注意,一旦您调整窗口大小,浏览器将重新绘制屏幕并将元素移回顶部.
实施例2
如果您添加顶部：50％的子元素,当JavaScript添加属性时,将不会发生任何事情,因为它不会有任何要覆盖的东西.
实施例3
如果您添加顶部：49％的子元素,那么DOM确实有更新的东西,所以我们会再次遇到奇怪的故障.
实施例4
如果添加height：50px;到容器,而不是孩子,那么顶级属性有一些位置反对,而不需要在JavaScript中使用切换.
@L_403_6@
如何垂直对齐
如果您只想知道如何垂直居中的东西,那么您可以执行以下操作：
将文本垂直居中的方法是将line-height设置为与容器高度相等.如果一行占用100像素,并且文本行在线占用10,则浏览器将尝试将文本居中在剩余的90个像素中,顶部和底部为45.
.glyphicon-large {
min-height: 260px;
line-height: 260px;
}
