CSS为什么行高line-height与文字高度height设为一样大,文字就垂直居中了?

发布网友发布时间：2022-04-21 03:11

共4个回答

热心网友时间：2023-11-04 20:43

用p元素输出一行文本后：
①line-height(行高)=font-size(字符大小)+word-spasing(上下行间距)
例如：行高设置为100px时，若字符大小为30px，那上下行间距就分别为35px；
重点是：字符上行间距和下行间距的大小是相同的。

②如果你知道height是块级元素的属性，没行内元素什么事，那你对你的问题就不难理解：
试想，一个100px高的div，它的上下padding都设置为35px；中间的content就是30px，此时，它的height(高)=content(内容大小)+padding(上下填充值)。

③结合以①②中的两个等式：当设置line-height等于height时，字符大小就是内容大小，而上下相同的行间距就相当于上下相同的padding。故，div中的内容居中=p元素的字符(撑满容器)居中。

“如果此时我把行高调为60px，那么文字中心点距上或者距下各为30px，那不仍然是垂直居中吗？”
你想想，你说的“垂直居中”是相对什么居中？相对于上一行的文本和下一行的文本垂直居中？确实是这样，但这不是相对包围他们的容器。

热心网友时间：2023-11-04 20:43

line-height行高是包含了文字的高度在内的，而height并非是文字的高度，而是文字所在标签的高度

行高举例的话，假如行高设为30px，那么就是文字中心点距上或者距下各为15px，所以行高与标签的高度一样的时候就垂直居中了追问如果此时我把行高调为60px，那么文字中心点距上或者距下各为30px，那不仍然是垂直居中吗？

追答如果超出标签的高度的话，会以居上的距离为准，那就会偏下
补充：table布局的话，td如果设定了高度，那么文字就会默认垂直居中，这个你可以好好利用

热心网友时间：2023-11-04 20:43

这是在文字只有一行的时候垂直居中的办法行高与文字容器同高，此时在效果上看就是垂直居中。多行文字需要用相对定位。

热心网友时间：2023-11-04 20:44

line-height是行高
height是容器高
块级容器里只有一行的情况下
line-height 等于 height 就是文字垂直居中