CSS 引导程序 3 中的垂直对齐字形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22719315/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical align glyphicon in bootstrap 3
提问by matthijs
I have a glyphicon as such:
我有一个这样的字形：
<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;
}
The glyphicon won't align to the center, vertically. When I open firefox, inspect element, and toggle off/on the top 50%rule, it suddenly works. How come?
字形不会垂直于中心对齐。当我打开 Firefox，检查元素并关闭/打开top 50%规则时，它突然起作用了。怎么来的？
回答by KyleMit
Browser Bug Explanation
浏览器错误说明
According to MDN on top:
根据MDN 上的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
对于相对定位的元素（带有 的元素
position: relative），它指定元素在其正常位置以下移动的量。
注意：百分比应用为元素包含块高度的百分比
According to W3 on top:
根据W3 上的top：
For relatively positionedboxes, 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
对于相对定位的框，偏移量是相对于框本身的顶部边缘（即，框在正常流中被赋予一个位置，然后根据这些属性从该位置偏移）。 注意：百分比是指包含块的高度
Here's my guess:
这是我的猜测：
I think what's happening is that when the browser is first rendering the visual tree, and sees top:50%;, it looks to the parent to set the height. Since no height has been specifically applied, and it has not loaded any child contents, the height of this div (and all divs) effectively starts off as zerountil otherwise indicated. It then pushes down the glyph by 50% of zero.
我认为发生的事情是，当浏览器第一次渲染可视化树并看到时top:50%;，它会寻找父级来设置高度。由于没有特别应用高度，也没有加载任何子内容，这个 div（和所有 div）的高度实际上从零开始，除非另有说明。然后它将字形下推 50% 的零。
When you toggle the property later, the browser has already rendered everything, so the calculated height of the parent container is provided by the height of its children.
当您稍后切换属性时，浏览器已经渲染了所有内容，因此父容器的计算高度由其子容器的高度提供。
Minimal, Complete, and Verifiable Example
最小、完整且可验证的示例
Note: This doesn't really have anything to do with Bootstrap or Glyphicons. In order to avoid a dependency on bootstrap, we'll add top: 1pxthat would have been applied by the .glyphiconclass. Even though it is overwritten by 50%, it still plays an important role.
注意：这与 Bootstrap 或 Glyphicons 没有任何关系。为了避免对引导程序的依赖，我们将添加该类top: 1px将应用的.glyphicon。即使它被 覆盖50%，它仍然起着重要的作用。
Here's a simple set of parent/child elements:
这是一组简单的父/子元素：
<div id="container">
<div id="child">Child</div>
</div>
In order to simulate the toggling the property in a more repeatable fashion, we can just wait two seconds and then apply a style in javascript like this:
为了以更可重复的方式模拟切换属性，我们可以等待两秒钟，然后在 javascript 中应用这样的样式：
window.setTimeout(function() {
document.getElementById("child").style.top = '50%';
},2000);
Example 1 (jsFiddle)
示例 1 ( jsFiddle)
As a starting point, let's recreate your issue.
作为起点，让我们重新创建您的问题。
#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;
}
Notice that as soon as you resize the window, the browser will repaint the screen and move the element back to the top.
请注意，只要您调整窗口大小，浏览器就会重新绘制屏幕并将元素移回顶部。
Example 2 (jsFiddle)
示例 2 ( jsFiddle)
If you add top: 50%to the child element, nothing will happen when the javascript adds the property because it won't have anything to overwrite.
如果您添加top: 50%到子元素，那么当 javascript 添加该属性时不会发生任何事情，因为它不会有任何要覆盖的内容。
Example 3 (jsFiddle)
示例 3 ( jsFiddle)
If you add top: 49%to the child element, then the DOM does have something to update so we'll get the weird glitch again.
如果您添加top: 49%到子元素，那么 DOM 确实需要更新某些内容，因此我们将再次遇到奇怪的故障。
Example 4 (jsFiddle)
示例 4 ( jsFiddle)
If you add height: 50px;to the container instead of the child, then the topproperty has something to position against right from the get go and you don't need to use toggle in JavaScript.
如果您添加height: 50px;到容器而不是子项，那么该top属性从一开始就可以定位，并且您不需要在 JavaScript 中使用切换。
How to Vertically Align
如何垂直对齐
If you just wanted to know how to vertically center something consistently, then you can do the following:
如果您只是想知道如何始终如一地垂直居中，那么您可以执行以下操作：
The trick to vertically centering text is to set the line-heightequal to the container height. If a line takes up 100 pixels, and the line of text online takes up 10, then browsers will try to center the text within the remaining 90 pixels, with 45 on the top and bottom.
垂直居中文本的技巧是设置line-height等于容器高度。如果一行占 100 个像素，而在线文本行占 10 个像素，那么浏览器将尝试将文本居中放置在剩余的 90 个像素内，顶部和底部分别为 45 个像素。
.glyphicon-large {
min-height: 260px;
line-height: 260px;
}
Solution in jsFiddle
jsFiddle中的解决方案
回答by Rowan
Tried centering a glyph icon that was inside an H1 tag, that was taking a while - so I discovered that you can actually change the font size and colour inside the SPAN tag contaning the glyph.
尝试将 H1 标签内的字形图标居中，这需要一段时间 - 所以我发现您实际上可以更改包含该字形的 SPAN 标签内的字体大小和颜色。
Thus:
因此：
<h1><span class="glyphicon glyphicon-envelope" style="font-size: 24px; color: #108db7;"></span> Mes Messages</h1>
actually worked out for me.
实际上对我有用。
回答by Pixel
Have you tried ? :
你有没有尝试过 ？：
<span class="glyphicon glyphicon-circle-arrow-up glyphicon-large" style="vertical-align:middle"></span>
