为什么必须使用行高来垂直对齐文本 [英] why must use line-height to vertical align the text

问题描述

这基本上只是需要一个理论解释。
我努力了几个小时垂直对齐中间的文本。它将如下所示： http://jsfiddle.net/YawDF/1/ 。我成功地做这个文本垂直对齐在中间添加 line-height 。

This is basically just need a theory explanation. I'm trying hard for a few hours to vertical align the text in the middle. It will look like this: http://jsfiddle.net/YawDF/1/. And I successfully doing this text vertically align in the middle by add line-height.

我的问题是为什么我们必须在这种情况下放置line-height？

My question is why we must put line-height in this case?

推荐答案

line-height 属性本质上是在文本完成订单的上方和下方设置 29px （29 + 29 = 58）如果您在下面添加了另一行文本，您会在此文本下方找到 58px 。

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.

这里是一个很好的幻灯片，以帮助您更好地理解这个概念... line-height

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

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

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

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

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.

vertical-align：middle 在您显示的代码中无效。这可以一起取出。

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

这篇关于为什么必须使用行高来垂直对齐文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！