我试图理解为什么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>
答案 0 :(得分：13)
line-height属性实际上是在文本“完整订单”的上方和下方设置29px （29 + 29 = 58）文本行。如果您在此下方添加了另一行文字，则会在此文字下方找到58px。您只是将行高放在中间位置。
这是一个很好的幻灯片，可以帮助您更多地理解这个概念...... line-height
以下是使用我所谈论的代码的示例：http://jsfiddle.net/YawDF/14/
通过将line-height设置为58px，您告诉浏览器在文本行的上方和下方留下一半，在每行之间创建一个'58px'的间隙，上面只有'29px'的间隙第一行。
SIDE注意：您使用vertical-align: middle在您显示的代码中无用。这可以一起取出。
答案 1 :(得分：1)
The text you generate is inside its own line box和vertical-align用于放置在该框内。但是，该框与文本周围的div无关。您将div的高度设置为58px，但这不会影响行文本框的高度。这就是为什么你需要行高来匹配div的高度。
答案 2 :(得分：0)
它是设计的。如果CSS解析器（即浏览器）不知道您的文本有多高，他就无法正确垂直对齐您的文本。
请注意，默认值为line-height属性。
答案 3 :(得分：0)
line-height定义文本的高度，使段落看起来整洁，因此当你增加行高度时，vertical-align与行高有关，它会增加高度，你可以更清楚地看到vertical-的效果 - 文本对齐
认为这是我们的孩子在幼儿班上学习英语写作的笔记本
答案 4 :(得分：0)
每当在分区中插入段落时，div的第一行和顶部边界之间的距离是行高的一半，即如果默认行高是1px则是第一行和顶部之间的距离div的边界是0.5px。
如果你有一个height:58px的分区，那么该行与div的上边界之间的距离是29px，并且该行与底部div的边界之间的距离将是=（总div高度 - 距离b / w线和顶部边界）58px-29px = 29px。这导致线在中心垂直对齐。
此外，如果您使用line-height集中对齐文字，则无需使用vertical align:middle（对于包含不超过一行的文字）。