深入浅出CSS（一）：line-height与vertical-align的性质
【测试代码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vertical与line-height测试</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid #000;
width:300px;
height: 200px;
line-height: 200px;
text-align: center;
}
p {
display: inline-block;
vertical-align: middle;
img {
vertical-align: middle;
border: 1px solid #000;
}
</style>
</head>
<body>
<div>
<p class="p">我啊</p>
<img src="http://mat1.gtimg.com/www/qq2018/imgs/qq_logo_2018x2.png" alt="图片加载失败">
</div>
</body>
</html>
一、line-height的性质
line-height在CSS中的定义为行高，具体计算方法如图所示：
由图中可以看出，在不设置元素高度以及padding、border、margin均为0的情况下，元素本身的高度就是它的line-height值，而文本与文本之间的间隙就是(line-height - font-size)。所以此时通过设置line-height值，就等于在设置元素高度（元素高度不固定且padding、border、margin不为0时，高度由padding、border、margin及行高共同控制）。
那么，在了解了line-height对元素高度的控制原理之后，就不难理解文本元素垂直居中的原理，令height=line-height，或者不设置height（默认line-height），都是通过让height = (line-height - font-size)/2 + font-size + (line-height - font-size)/2，然后文本居中显示。如果在一个<div>中嵌套一个<p>分别把p元素display: inline-block、display:line，则为下图展示的原理：
1.display：block(默认);
p元素与div元素等高且等宽
2.display：inline-block;
p元素与div元素等高，与内容等宽
3.display:：inline;
p元素与内容等高且等宽
上面三张图片，分别展示了p在三种元素类型下的不同表现形式，从中可以理解inline-block的工作机理（子元素继承），实际上是通过控制高度，使内容（inline）居中，而不是元素本身居中。那么试想一下，如果在p元素前插入一段纯文本，或者P元素是多行文本，那么div中显示情况又会如何？图中的div的height是固定的100px，那如果不设置height的值，又会如何显示？？请各位自己动手进行验证~
另外，从第一张及第二张图中还可以看出一个小问题，p元素的边框溢出了div的盒子。通过父元素div设置固定值height与不设置固定值时，确定子元素p的height与父元素div的height的计算关系。希望各位同仁能够找到自己的答案~
二、vertical-align的性质
vertical-align从字面上理解就是垂直排列，这货有一大堆属性可写。不要觉得这货平常不怎么用，实际上它无处不在。因为浏览器默认设置中，inline与inline-block的对齐方式，就是baseline基线对齐，想要理解各种属性的对齐方式，我们先看一下各种属性的意义，如图所示：
这个图实在是难画，从水印也可以看出来，我是直接从网上粘过来的，如有雷同，我选择删除（哈哈，skr）
1）vertical-align各种属性：
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
2）vertical-align对齐方式：
3）其余补充： 1.verti-align只可用于inline或inline-block； 2.vertical-align必须在目标元素中声明，对其他元素不产生影响； 3.vertical-align如果设置%属性的话，以line-height值为计算基数； 4.vertical-align默认属性为baseline；
三、line-height与vertical-align的搭配使用，元素垂直居中
在第一部分最后我说到了，通过line-height达到的居中效果，实际上是子元素继承了父元素的height与line-height设置，本质上是内容的居中，而非元素本身的居中。试想一下，如果div中嵌入的是img而非p元素，如何在一个height设置了固定值的div中，将img垂直居中显示？？（这里的固定值，包括从父元素按%计算而来的固定值。未设置固定高度值的，高度以内容为准，可通过padding-top/bottom或line-height设置居中）
这就是涉及到了line-height与vertical-align的配合使用。
在实际操作前，首先回忆一下刚才的内容： 1.line-height通过控制元素高度与其内容字体高度的差值均分，实现垂直居中； 2.vertical-align默认baseline对齐； 3.vertical-align在目标元素中声明，且目标元素一定是inline或inline-block属性的元素；
Duang~准备就绪。现在开始说明操作过程，同样以图片直观的展现：
1.当给div一个固定的height值，在不设置line-height及vertical-align时，由于设置了*{margin: 0;padding: 0;}，图片是紧贴顶端的。
2.让我们来加一段文字，让理解更直观。此时，我们就能看到vertical-align的默认属性baseline对齐。图片由于不是文字，它的基线就是它的margin底（此图中margin为0），即border-bottom。
3.下面让我们给img属性增加vertical-align: middle;，可以看出文本与图片居中对齐了，但是文本呢，有一点emmmmmm，不那么居中！因为图片是以自身的middle line与文本的baseline对齐的。所以实际的中点要在对齐线的上方（详情上翻至vertical-align的对齐方式）。
4.设置div的line-height = height值，去除文字的border（防止子元素p继承父元素div的高度后，增加border溢出）。此时文本垂直居中显示，按照上一步的解释，不难看出，实际上图片因为与文本并不是真正的居中对齐，所以并没有真正的垂直居中。
【p元素也声明vertical-align: middle;后】
5.1）那么怎么才能让图片真正的垂直居中呢？脑子转的快的朋友肯定已经想到了，可以把p元素也声明vertical-align: middle;啊。这确实是个好方法，但是！如果文本设置了vertical-align后，它自身也并不是垂直居中了的话，那这种方法就不成立了。而且很不幸的是，情况就是这样（控制台可查看p元素高度，已经溢出div盒子）。那么为什么会出现这种情况呢。那就要我们回想一下，如果行内只有一个p元素或者一个img元素的话，它又是跟谁对齐的。
要理解行内元素对齐，这里就必须提出一个假设，假设block元素内，存在一个empty元素。在block元素内只嵌套了一个inline或inline-block元素时，作为规则的参照物。而且empty元素虽然看不见，但要假设它里边有一个继承自父元素font-size的文本，这样它才具有正常的baseline、middle line及top、bottom等。理解了这一假设，就不难理解为什么p元素设置vertical-align: middle;后，图片仍然不是垂直居中。因为p元素中线与empty元素的基线对齐了。
那么有的朋友又会提出问题了，既然图片与文本的基线对齐，文本下移了，图片为什么没有跟着文本的基线一起下移呢？那是因为基线始终都有一条，那就是empty元素的基线。这也就解释了，为什么p元素设置了vertical-align: middle;后，只有p元素下移，而img元素纹丝不动。因为p元素与empty元素由baseline对齐baseline变为了middle line对齐baseline，造成了下移，而img元素始终都与empty元素对齐，所以纹丝不动。
2）俗话说柳暗花明又一村，一条路走不通，必然有另一条路。既然改变p元素的vertical-align行不通，那就尝试其他方法，比如改变基线的位置。
这就需要另一个属性font-size，既然基线由行内empty元素的字体大小决定，那如果我把font-size设置成0，那不是所有线全都汇聚成了一条，那么文字的居中显示，不就变成了这条汇聚线的居中显示？这样的话，跟基线对齐岂不是就成了居中对齐？简直美滋滋~
这样又有朋友说了，这样文字就消失不见了，一个问题解决了，又出来个新问题，这什么时候是个头啊？？？别急，这个方法简单，那就是给p元素，单独加一个font-size声明，这样的话，p元素的内容就出来。我们的目的只是改变empty元素的继承自父元素div的字体大小，完美解决~ 至此，line-height与vertical-align的性质及组合用法就介绍完毕，本文主要参考了张鑫旭大神的《CSS深入理解vertical-align和line-height的基友关系》，如有雷同，不用怀疑，就是受了他的启发~
文中若有错误及不妥之处，欢迎指正~
深入浅出CSS（一）：line-height与vertical-align的性质的更多相关文章
- What is Vertical Align?
https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...
- css & multi line words & ellipsis
css & multi line words & ellipsis bug .news-card-content-title { width: 100%; height: 0.8rem ...
- 深入浅出CSS（三）：隐藏BOSS大盘点之默认属性小总结
写在前面 严重警告,本文包含大量文字,且无配图,请做好充分心理准备后,再进行阅读! 严重警告,本文包含大量文字,且无配图,请做好充分心理准备后,再进行阅读! 严重警告,本文包含大量文字,且无配图,请做 ...
- 【CSS系列】height:100%设置div的高度
一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...
- css delete line text & html del
css delete line text & html del html <del>¥720</del> demo <span class="ticke ...
- 浏览器兼容CSS代码：按钮文字垂直居中(input button text vertical align)
经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...
- 深入了解css的行高Line Height属性
什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...
- 前端知识点回顾之重点篇——CSS中vertical align属性
来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...
- 深入浅出CSS（二）：关于雪碧图、background-position与steps函数的三角恋情
[测试代码] HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
随机推荐
- Java接口interface,匿名内部类
接口 1.接口内部为 常量+公用的抽象方法.类必须实现接口中的所有方法 2.接口的语法格式:不写abstract会自动添加,可以继承多个接口 修饰符不能使private,protected [修饰符] ...
- OC创建对象并访问成员变量
1.创建一个对象 Car *car =[Car new] 只要用new操作符定义的实体,就会在堆内存中开辟一个新空间 ［Car new］在内存中 干了三件事 1)在堆中开辟一段存储空间 2)初始化成员 ...
- HTML5+规范：Webview的使用详解
一.知识点 Webview模块管理应用窗口界面,实现多窗口的逻辑控制管理操作.通过plus.webview可获取应用界面管理对象. 1.方法 1.1.all: 获取所有Webview窗口 Array[ ...
- lintcode-477-被围绕的区域
477-被围绕的区域 给一个二维的矩阵,包含 'X' 和 'O', 找到所有被 'X' 围绕的区域,并用 'X' 填充满. 样例 给出二维矩阵: X X X X X O O X X X O X X O ...
- 类的static成员变量和成员函数能被继承吗
1. 父类的static变量和函数在派生类中依然可用,但是受访问性控制(比如,父类的private域中的就不可访问),而且对static变量来说,派生类和父类中的static变量是共用空间的,这点 ...
- 软工网络15团队作业4-DAY7
每日例会 昨天的工作. 张陈东芳:sql连接的基本完成,尝试被其他类调用,未导入全部商品信息: 吴敏烽:基本完成商品信息的调用: 周汉麟:设定商品的调用规则: 林振斌:设计缓存区代码,用于存取最近浏览 ...
- TClientDataSet[5]: 读取数据
本例用到: TClientDataSet.Fields[]; { 字段集合; 它比 FieldList 有更多功能, 如可获取嵌套字段 } TClientDataSet.FieldL ...
- 以太网帧，IP，TCP,UDP首部结构
1.以太网帧的格式 以太网封装格式 2.IP报头格式 IP是TCP/IP协议簇中最为重要的协议.所有的TCP,UDP, ICMP和IGMP数据都以IP数据报格式传输.IP提供的是不可靠.无连接的协议. ...
- 当我们有多个类 继承同一个父类 这时候使用多态时候 可以使用该父类的类型做引用 不需要将object做引用
当我们有多个类 继承同一个父类 这时候使用多态时候 可以使用该父类的类型做引用 不需要将object做引用
- 2017 ACM Arabella Collegiate Programming Contest(solved 9/13, complex 12/13)
A.Sherlock Bones 题意: 给出长度为n的01串,问f(i,j)=f(j,k),(i<j<k)的i,j,k取值种数.其中f(i,j)表示[i,j]内1的个数, 且s[j]必须 ...