css行高（line-height）及文本垂直居中原理

2024-06-16 08:55:39

css行高（line-height）及文本垂直居中原理

一、行高的定义

标准定义：两行文字基线之间的距离。

那么什么是基线？

基线是在英文字母中用到的一个概念，我们刚学英语的时使用的那个英语本子每行有四条线。在 CSS 中，每一行文字也可以看成一个“行盒子”，而每一个行盒子都有4 条线：顶线、中线、基线和底线。关于行盒子的具体内容，看下图：

如图，每一行文字，可看成由上间距、文本内容、下间距构成，根据行高的标准定义，行高等于两条基线之间的距离，即第一行的3-4+上下间距+第二行的1-2+2-3，因为css中每一行的上间距和下间距肯定是相等的，所以代换一下，行高就等于它本身的上间距+下间距+文本高度。因此，我们也可以把行高记为，行高就是一行的高度，这一行的高度中包含了上下两个间距和文本内容本身。

二、行高的应用

因为我们刚才说了，css中的每一行的上下间距相等，那么，文本内容在每一行中都是居中的。利用这个原理，我们就可以搞事情了,相信你也猜到了，没错，就是垂直居中。不信，我们看代码：

 <div>123</div>

 div{line-height:50px;border: 1px solid silver;text-align:center;}

效果图：

**注意注意！：**之前我们都以为，设置文本的垂直居中是把height值和line-height值设置为一样，才能够垂直居中。其实，在这里，我们看到了，这种说法其实并不准确，我们不用设置height值，同样可以垂直居中。原因是line-height本身就可以代表一行的高度，会自己撑开盒子，而设置盒子的height值反而多次一举了，反而给自己找不痛快，相当于设置line-height,其实就是设置了height了，以后我们也没必要在css中多写一行height值和line-height一样了。

三、关于line-height的继承和取值

line-height的取值可以是纯数值，%，em,不带单位的数值。每种取值的区别和用法可以自己去百度查一查，有的值还与继承有关，这里就不一一赘述了。

四、今日总结：

1.理解line-height的含义

2.line-height的垂直居中性

css行高（line-height）及文本垂直居中原理相关推荐

CSS——行高、字体、文本的样式
一.行高行高(line height)行高指的是文字占有的实际高度可以通过line-height来设置行高行高可以直接指定一个大小(ex pm)也可以设置一个整数如果是一个整数行高将会是字体的指定的 ...
html中高与行高的区别,深入了解css的行高Line Height属性
什么是行间距? 古时候我们是用印刷机来处理文字,印出来的每个字都位于独立的一个块里. 行间距,即传说中控制两行文字之间垂直距离的东东. 在CSS,line-height被用来控制行与行之间的垂直距离. ...
html中行高是指字的高度嘛,CSS行高line-height的理解
一.行高的字面意思 "行高"顾名思义指一行文子的高度.具体来说是指两行文子间基线间的距离. 基线是在英文字母中用到的一个概念,我们刚学英语的时候使用到的那个英语本子每行有4条线,其 ...
html里面行高的原理,CSS行高（line-height）及文本垂直居中原理
在CS多现业讲进行效通近年有务这行定果过近年有S中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中 ...
CSS基础-行高（height和line-height)【学习笔记】
1 行高测量行高的测量方法: 2 单行文本垂直居中行高我们利用最多的一个地方是: 可以让单行文本在盒子中垂直居中对齐. 文字的行高等于盒子的高度. 这里情况些许复杂,开始学习,我们可以先从简单地方 ...
CSS行高等于盒子的高度，能让文字在盒子里面垂直居中的原理
CSS行高等于盒子的高度,能让文字在盒子里面垂直居中的原理:用pink老师的一张ppt就成让人一下子明白过来.
CSS 行高与行对齐精解：line-height 和 vertical-align （图文）
7.3 line-height 行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响. 7.3.1 语法 line-height属性的具体定义列表如下: 语 ...
【转】css行高line-height的一些深入理解及应用
一.前言前两天在腾讯ISD团队博客上看到一篇翻译的文章"深入理解css 行高",是个不错的文章,学到了不少东西,建议您看看. 这里,我也要讲讲我对line-height的一些理解 ...
css行高line-height的一些深入理解及应用
by zhangxinxu from http://www.zhangxinxu.com,原文地址:http://www.zhangxinxu.com/wordpress/?p=384 一.一些字面意 ...

最新文章

热门文章