行高如何使文本垂直居中？
我试图理解为什么 line-height CSS 属性将文本垂直放置在该按钮的中间：
.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>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>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
line-height属性本质上是在文本“Complete Order”的上方和下方设置一个29px(29 + 29 = 58) 文本行。如果您在下面添加了另一行文本，您会发现它位于该文本下方58px。您在此处放置行高只是为了使文本居中。这是一个很好的幻灯片，可以帮助您更多地理解这个概念... line-height
这是一个示例使用我正在谈论的代码： http://jsfiddle.net/YawDF/14/
通过设置
行高至58px你告诉浏览器在文本行的上方和下方留出一半的距离，在每行之间创建一个“58px”的间隙，并且在第一行上方仅创建一个“29px”的间隙。旁注：您使用的
vertical-align: middle在您显示的代码中是没有用的。这个可以一起取出来。The
line-heightproperty is essentially setting a29px(29 + 29 = 58) text line above and below your text, "Complete Order". If you added another line of text below this you will find it58pxbelow 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-heightto58pxyou 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: middleis useless in the code you are showing. This can be taken out all together.每当在分区中插入段落时，第一行和 div 上边框之间的距离是行高的一半，即如果默认行高是 1px，则第一行和 div 上边框之间的距离div 为 0.5px。
如果您有一个
height:58px的分区，则线条与 div 顶部边框之间的距离为 29px，线条与底部 div 边框之间的距离将为=(总 div线和顶部边框的高度距离），即 58px-29px=29px。这会导致线在中心垂直对齐。另外，如果您使用行高居中对齐文本，则无需使用垂直对齐：中间（对于包含不超过一行的文本）。
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.
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.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.这是设计使然。如果CSS解析器（即浏览器）不知道你的文本有多高，他就无法正确垂直对齐你的文本。
请注意，
line-height属性有一个默认值。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.
Note there is a default value of
line-heightproperty.行高定义了文本的高度，使段落看起来整洁，因此垂直对齐相对于行高起作用，当您增加行高时，它会增加高度，并且您可以更清楚地看到文本垂直对齐的效果
认为这是我们孩子在幼儿园课堂上学习英语写作的笔记本
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
think this as a notebook which we children use to learn English -writing in nursery class
您生成的文本位于其自己的行框内并且垂直 -对齐用于放置在该框内。但是，该框与您包裹在文本周围的 div 无关。您将 div 的高度设置为 58px，但这不会影响行文本框的高度。这就是为什么你需要 line-height 来匹配 div 的高度。
The text you generate is inside its own line box and 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.