【测试代码】

 <!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对齐方式：
　　　　1、浏览器默认baseline对齐；
　　　　2、设置了middle/baseline的情况下，元素自身middle/baseline会和行内其他元素的baseline对齐（一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线——摘自张鑫旭《CSS深入理解vertical-align和line-height的基友关系》）；
　　　　3、设置了top/bottm情况下，自己的top/bottom会和行内其余元素中最高的top/最低的bottom对齐；　　
 
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的性质的更多相关文章

  1. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  2. css & multi line words & ellipsis

    css & multi line words & ellipsis bug .news-card-content-title { width: 100%; height: 0.8rem ...

  3. 深入浅出CSS（三）：隐藏BOSS大盘点之默认属性小总结

    写在前面 严重警告,本文包含大量文字,且无配图,请做好充分心理准备后,再进行阅读! 严重警告,本文包含大量文字,且无配图,请做好充分心理准备后,再进行阅读! 严重警告,本文包含大量文字,且无配图,请做 ...

  4. 【CSS系列】height:100%设置div的高度

    一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...

  5. css delete line text & html del

    css delete line text & html del html <del>¥720</del> demo <span class="ticke ...

  6. 浏览器兼容CSS代码：按钮文字垂直居中(input button text vertical align)

    经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...

  7. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  8. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  9. 深入浅出CSS（二）：关于雪碧图、background-position与steps函数的三角恋情

    [测试代码] HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

随机推荐

  1. iPhone上的CPU架构,核数以及运行内存

    机型 CPU架构 CPU名 CPU位数 CPU核数 运行内存 iPhone 5 ARMv7s A6 32bit 双核 1G iPhone 5c ARMV7s A6 32bit 双核 1G iPhone ...

  2. Requests库入门——应用实例-网络图片的爬取与保存（好看的小姐姐≧▽≦）

    在B站学习这一节的时候,弹幕最为激烈,不管大家是出于什么目的都想体验一下网络爬虫爬取图片的魅力,毕竟之前的实例实话说都是一些没有太大作用的信息. 好了,直接上代码: import requests i ...

  3. 欢迎来怼---作业要求 20171015 beta冲刺贡献分分配规则

    一.小组信息 队名:欢迎来怼 小组成员 队长:田继平 成员:李圆圆,葛美义,王伟东,姜珊,邵朔,阚博文 基础分      每人占个人总分的百分之40% leangoo里面的得分    每人占个人总分里 ...

  4. Java Web文件上传原理分析(不借助开源fileupload上传jar包)

    Java Web文件上传原理分析(不借助开源fileupload上传jar包) 博客分类: Java Web   最近在面试IBM时,面试官突然问到:如果让你自己实现一个文件上传,你的代码要如何写,不 ...

  5. 404 Note Found -选题报告

    目录 NABCD分析引用 N(Need,需求): A(Approach,做法): B(Benefit,好处): C(Competitors,竞争): D(Delivery,交付): 初期 中期 个人贡 ...

  6. 线段树---no end

    额,还有 :区间操作,交,并,补等 区间合并 扫描线 这些问题有空再研究吧.... 先看j2ee了..... 传送门 版权声明:本文为博主原创文章,未经博主允许不得转载.

  7. virtual judge 本地部署方案

    这是一种将自己的电脑当作服务器来部署一个vj的方法,我也是参考前辈们的做法稍作了改动,如果在服务器上部署的话需要在细节上稍作改动: 一.什么是Virtual Judge? vj的工作原理什么?  vj ...

  8. Spring源码解析 – AnnotationConfigApplicationContext容器创建过程

    Spring在BeanFactory基础上提供了一些列具体容器的实现,其中AnnotationConfigApplicationContext是一个用来管理注解bean的容器,从AnnotationC ...

  9. 3dContactPointAnnotationTool开发日志（二八）

      师姐说物体间不能有穿透,于是我试了下给物体加rigidbody和meshCollider   然后就报错:   说是用meshCollider要么去掉刚体要么就把刚体设置为iskinematic. ...

  10. Java web 强制301跳转

    response.setStatus(HttpServletResponse.SC_MOVED_PERMANENTLY); response.setHeader("Location" ...