关于垂直居中设置px值问题

首页课程实战体系课手记专栏慕课教程

关于垂直居中设置px值问题

来源：3-10 vertical-align

qq_好久不见_80

2018-01-14 10:27:35

.warp{height:400px;

width:1000px;

border:1px blue solid;

line-height:400px;

text-align:center;}

为什么垂直居中需要line-height与height的值是一样的？我理解为height值一共就400px，如果居中的话不应该是除以2等于200px吗？

写回答

2回答

小于飞飞

2018-01-17

已采纳

涉及到深入的知识：

line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。

所以：单行文字行高相当于右侧红色括号区域，假设：单行文字行高200px,绿色区400px，从图上来看，不会垂直居中，如果单行文字行高设置400px，与整体区域一样，根据上面的知识，正好垂直居中。

在应用中，主要记住line-height=height时，使单行文字垂直居中显示，加油！

hq_好久不见_80

h 非常感谢！我还是记住最后一句吧哈哈

h018-01-20

共1条回复

小于飞飞

2018-01-14

单行文字在一定高度范围内垂直居中，使用line-height与height的值是一样，可以实现，设想高400px, line-height:200px,通俗理解这行文字占高200px, 所不可能在400高度内实现垂直，在考虑下，动手实践，加油

hq_好久不见_80

h 没懂啊啊啊

h018-01-16

共1条回复

0 学习 · 36712 问题

相似问题

回答 1

回答 5

回答 1

回答 2

回答 1