blocks|key|2082392|text|line-height属性实际上是在文本上方和下方设置一个29px+(29+%2B+29+=+58)文本行"Complete+Order“。如果您在此文本下面添加了另一行文本，您会发现它位于此文本下面的58px。您在此处设置行高只是为了使文本居中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2082393|这里有一个很好的幻灯片演示，可以帮助你更好地理解这个概念。line-height|2082394|下面是一个使用我正在讨论的代码的示例：http://jsfiddle.net/YawDF/14/|2082395|通过将line-height设置为58px，您将告诉浏览器在文本行的上下保留一半，从而在每行之间创建一个'58px‘的间距，而在第一行上方只有一个'29px’的间距。|2082396|附注:在您所展示的代码中，您对vertical-align:+middle的使用是无用的。这个可以一起拿出来。|2082397|entityMap|0|LINK|mutability|MUTABLE|url|http://www.slideshare.net/maxdesign/line-height|1|http://jsfiddle.net/YawDF/14/^0|0|B|T|4|2R|4|0|T|B|0|0|J|T|1|0|3|B|H|4|0|F|M|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@$9|15|A|16|1|17]]|E|$]]|$1|H|3|I|5|6|7|18|8|@]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|J|3|K|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|N|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|O|$P|$5|Q|R|S|E|$T|U]]|V|$5|Q|R|S|E|$T|W]]]]

The <code>line-height</code> property is essentially setting a <code>29px</code> (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 <code>58px</code> 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... <a href="http://www.slideshare.net/maxdesign/line-height">line-height</a>

And here is an example using your code of what I am talking about: <a href="http://jsfiddle.net/YawDF/14/">http://jsfiddle.net/YawDF/14/</a>

By setting the <code>line-height</code> to <code>58px</code> 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 <code>vertical-align: middle</code> is useless in the code you are showing. This can be taken out all together.

blocks|key|2082357|text|这是设计好的。如果CSS解析器(即浏览器)不知道你的文本有多高，他就不能正确地垂直对齐你的文本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2082358|注意，line-height属性有一个默认值。|offset|length|style|CODE|2082359|entityMap^0|0|3|B|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

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 <code>line-height</code> property.

blocks|key|5610660|text|行高定义使段落看起来整齐的文本高度，因此垂直对齐相对于行高有效。当您增加行高时，它会增加高度，这样您就可以更清楚地看到文本垂直对齐的效果。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5610661|把这个当作我们孩子在托儿所课堂上用来学习英语-writing的笔记本。|5610662|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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

blocks|key|4193263|text|The+text+you+generate+is+inside+its+own+line+box和垂直对齐用于在该框内放置。但是，该框与您围绕文本包装的div无关。您将div的高度设置为58px，但这不会影响行文本框的高度。这就是为什么你需要line-height来匹配div的高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4193264|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS2/visuren.html#inline-boxes^0|0|1C|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<a href="http://www.w3.org/TR/CSS2/visuren.html#inline-boxes" rel="nofollow">The text you generate is inside its own line box</a> 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.

blocks|key|4193302|text|每当在分割中插入段落时，div的第一行和上边框之间的距离是行高的一半，即，如果默认的行高是1px，那么第一行和div的上边框之间的距离是0.5px。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4193303|如果使用height:58px进行分割，则线与div的上边界之间的距离为29px，而线与下div的边界之间的距离为be=(总div高度-线与上边界的距离b/w+)，即58px-29px=29px。这导致直线垂直居中对齐。|offset|length|style|CODE|4193304|此外，如果您使用行高来居中对齐文本，则不需要使用vertical+align:middle(对于包含不超过一行的文本)。|4193305|entityMap^0|0|4|B|0|O|L|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|K|$]]

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 <code>height:58px</code> the 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 <code>vertical align:middle</code>(for text containing not more than one line) if you're using line-height to centrally align the text.

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

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.btn-order {
 width: 220px;
 height: 58px;
 font-size: 24px;
 padding: 0;
 text-align: center;
 vertical-align: middle;
 line-height: 58px;
 border: 1px solid black;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="btn-order"&gt;Complete Order&lt;/div&gt;</code></pre>
</div>
</div>

How does line-height vertically center text?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我试图理解为什么line-height CSS属性将文本垂直放置在此按钮的中间：​.btn-order {    width: 220px;    height: 58px;    font-size: 24px;    padding: 0;    text-align: center;    vertical-align: middle;    line-height: 58px;    bo

问行高如何使文本垂直居中？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问行高如何使文本垂直居中？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问行高如何使文本垂直居中？
EN