唯品秀前端博客
当前位置: 前端开发 > HTML/CSS > 深入了解line-height文字垂直居中

深入了解line-height文字垂直居中

2018-09-29 分类:HTML/CSS 作者:管理员 阅读(2519)

先思考下面这个问题:默认空div高度是 0,但是一旦里面写上几个文字,div高度就有了,请问这个高度由何而来,或者说是由哪个 CSS 属性决定的?

如果仅仅通过表象来确认,估计不少人会认为div高度是由里面的文字撑开的,也就是font-size 决定的,但本质上是由 line-height 属性全权决定的,尽管某些场景确实与font-size 大小有关。

我们不妨设计一个简单的例子来看看真相究竟是什么。例如:

1
2
3
4
5
6
7
//html
<div class="test1">测试</div>
<div class="test2">测试</div>

//css
.test1{font-size:20px; line-height:0; border:1px solid #cccccc; background:#eeeeee;}
.test2{font-size:0; line-height:20px; border:1px solid #cccccc; background:#eeeeee;}

结果如下图(windows IE6浏览器下):

很显然,从上面这个例子可以看出,div高度是由行高决定的,而非文字。

为什么 line-height 可以让内联元素“垂直居中”

坊间流传着这么一种说法:“要想让单行文字垂直居中,只要设置 line-height 大小和height 高度一样就可以了。”类似下面这样的代码:

1
2
3
4
.title {
height: 24px;
line-height: 24px;
}

从效果上看,似乎验证了这种说法的正确性。但是,实际上,上面的说法对 CSS 初学者会产生两个严重的误导,同时,语句本身也存在不严谨的地方!

误区之一:要让单行文字垂直居中,只需要 line-height 这一个属性就可以,与 height一点儿关系都没有。也就是说,我们直接:

1
2
3
4
.title {
line-height: 24px;
//这样就可以了。坊间传闻的说法会误导大小一定要同时设置 height 属性才可以。
}

误区二:行高控制文字垂直居中,不仅适用于单行,多行也是可以的。准确的说法应该是“line-height 可以让单行或多行元素近似垂直居中”。稍等,这里有个词似乎和上面的表述有点儿微妙的差异,“近似垂直居中”?没错,一定要加上“近似”二字,这样的说法才足够严谨。换句话说,我们通过 line-height 设置的垂直居中,并不是真正意义上的垂直居中!究竟是怎么一回事?

这里,其实要解答的是两个问题,一个是为何可以“垂直居中”,另一个是为何是“近似”。正如上一节所说的,没有什么理所当然,行高可以实现“垂直居中”原因在于 CSS 中“行距的上下等分机制”,如果行距的添加规则是在文字的上方或者下方,则行高是无法让文字垂直居中的。说“近似”是因为文字字形的垂直中线位置普遍要比真正的“行框盒子”的垂直中线位置低,譬如我们拿现在用得比较多的微软雅黑字体举例:

1
2
3
4
5
6
7
8
p {
font-size: 80px;
line-height: 120px;
background-color: #666;
font-family: 'microsoft yahei';
color: #fff;
}
<p>微软雅黑</p>

结果,我都不需要标注,肉眼就能看出字形明显偏下,如图

由于我们平时使用的 font-size 都比较小,12px~16px 很多,因此,虽然微软雅黑字体有下沉,但也就 1 像素的样子,所以我们往往觉察不到这种“垂直对齐”其实并不是真正意义上的垂直居中,只是感官上看上去像是垂直居中罢了。这也是我总是称line-height 实现的单行文本垂直居中为“近似垂直居中”的原因。

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(6) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
6

谢谢你请我吃鸡腿*^_^*

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - 深入了解line-height文字垂直居中

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与,主题源码 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 243 篇
  • 草稿数目: 0 篇
  • 分类数目: 15 个
  • 独立页面: 6 个
  • 评论总数: 906 条
  • 链接总数: 14 个
  • 标签总数: 433 个
  • 建站时间: 1067 天
  • 注册用户: 3710 人
  • 访问总量: 8696457 次
  • 最近更新: 2019年11月14日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线