行高如何垂直居中文本？ [英] How does line-height vertically center text?

问题描述

我试图理解为什么 line-height CSS属性将文本垂直放置在此按钮的中间：

.btn-order {width：220px;身高：58px; font-size：24px;填充：0; text-align：center; vertical-align：middle; line-height：58px; border：1px solid black;}

< div class = btn-order> Complete Order< / div>

>解决方案 line-height 属性本质上是设置一个 29px （ 29 + 29 = 58）文本行上方和下方的完整订单。如果您在下面添加了另一行文字，您会在此文本下找到 58px 。你在这里放置行高只是为了让你的文字居中。

这是一个很好的幻灯片，可以帮助你更好地理解这个概念...... 行高

这里是一个使用你的代码的例子我在说什么： http://jsfiddle.net/YawDF/14/

通过将 line-height 设置为 58px ，您告诉浏览器留下一半以上并在文本行下方，在每行之间创建一个58px的间隔，并且在第一行上方只有一个29px的间隔。

SIDE NOTE：Your use vertical-align：middle 在您显示的代码中没有用处。这可以一起取出。

I'm trying to understand why the line-height CSS property places the text vertically in the middle of this button:

.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>

解决方案

The line-height property 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 58px below this text. You are putting line-height here only to center your text in the middle.

Here is a good slide show to help you understand this concept more... line-height

And here is an example using your code of what I am talking about: http://jsfiddle.net/YawDF/14/

By setting the line-height to 58px you 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.

SIDE NOTE: Your use of vertical-align: middle is useless in the code you are showing. This can be taken out all together.

这篇关于行高如何垂直居中文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！