Html line-height 如何垂直居中文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8799164/
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
How does line-height vertically center text?
提问by
I'm trying to understand why the line-heightCSS property places the text vertically in the middle of this button:
我试图理解为什么line-heightCSS 属性将文本垂直放置在此按钮的中间：
.btn-order {
width: 220px;
height: 58px;
font-size: 24px;
padding: 0;
text-align: center;
vertical-align: middle;
line-height: 58px;
border: 1px solid black;
}<div class="btn-order">Complete Order</div>回答by Michael Rader
The line-heightproperty is essentially setting a 29px(29 + 29 = 58)text line above and below your text, "Complete Order". If you added another line of text below this you will find it 58pxbelow this text. You are putting line-height here only to center your text in the middle.
该line-height属性实质上是在文本“完成订单”的上方和下方设置一个29px(29 + 29 = 58)文本行。如果您在此下方添加了另一行文本，您会在此文本下方找到它58px。您在此处放置 line-height 只是为了将文本居中。
Here is a good slide show to help you understand this concept more... line-height
这是一个很好的幻灯片，可以帮助您更多地理解这个概念...... line-height
And here is an example using your code of what I am talking about: http://jsfiddle.net/YawDF/14/
这是一个使用我正在谈论的代码的示例：http: //jsfiddle.net/YawDF/14/
By setting the line-heightto 58pxyou are telling the browser to leave half this above and below the text line, creating a '58px' gap between each line and only a '29px' gap above the first line.
通过将 设置line-height为58px您告诉浏览器在文本行的上方和下方保留一半，在每行之间创建一个“58px”的间隙，并且在第一行上方创建一个“29px”的间隙。
SIDE NOTE: Your use of vertical-align: middleis useless in the code you are showing. This can be taken out all together.
边注：vertical-align: middle在您显示的代码中，您使用的是无用的。这个可以一起取出来。
回答by Rob
The text you generate is inside its own line boxand vertical-align is used for placement inside that box. However, that box has nothing to do with the div you have wrapped around the text. You set the height of the div to 58px but that does not affect the height of the line text box. That is why you need line-height to match the height of the div.
您生成的文本位于其自己的行框内，并且垂直对齐用于放置在该框内。但是，该框与您环绕文本的 div 无关。您将 div 的高度设置为 58px，但这不会影响行文本框的高度。这就是为什么你需要 line-height 来匹配 div 的高度。
回答by aditya
Whenever a paragraph is inserted in a division the distance between the first line and the top border of the div is half of the line-height i.e if the default line- height is 1px then the distance between the first line and the top-border of the div is 0.5px.
每当一个段落插入一个分区时，第一行和 div 上边框之间的距离是 line-height 的一半，即如果默认 line-height 是 1px 那么第一行和 div 上边框之间的距离div 是 0.5px。
If you have a division with height:58pxthe distance between the line and the top-border of the div is 29px and the distance between the line and the border of the bottom div would be=(total div height-distance b/w the line and the top border) which is 58px-29px=29px.This results in the line being vertically aligned at the center.
如果你有一个分割height:58px线和 div 的上边框之间的距离是 29px 并且线条和底部 div 的边框之间的距离将是 =（总 div 高度 - 距离 b/w 线和顶部边框），即 58px-29px=29px。这会导致线条在中心垂直对齐。
Also,there is no need to use vertical align:middle(for text containing not more than one line) if you're using line-height to centrally align the text.
此外，vertical align:middle如果您使用 line-height 来居中对齐文本，则无需使用（对于包含不超过一行的文本）。
回答by Raptor
it is by design. If the CSS parser (i.e. the browser) doesn't know how tall is your text, he can't vertical align your text correctly.
这是设计使然。如果 CSS 解析器（即浏览器）不知道您的文本有多高，他就无法正确地垂直对齐您的文本。
Note there is a default value of line-heightproperty.
请注意，line-height属性有一个默认值。
回答by Bipin Chandra Tripathi
line-height defines the height of text which make the paragraph looks neat so vertical-align works with respect to line-height when you increase the line height it increases the height and the you can more clearly see the effects of vertical-alignment of text
line-height 定义了使段落看起来整洁的文本高度，因此当您增加行高时，vertical-align 相对于 line-height 起作用，它增加了高度，您可以更清楚地看到文本垂直对齐的效果
think this as a notebook which we children use to learn English -writing in nursery class
把它当作我们孩子在幼儿园学习英语写作的笔记本
