line-height，vertical-align及图片居中对齐问题…
2018-06-24 00:38:22来源：未知 阅读 ()
关于图片居中对齐的问题，进入前端行业虽然有一段时间了，以为自己懂了，可是实际上还是一知半解，找了一些博客来看了一下，但是感觉讲的有点碎，看完还是一知半解。
查阅了一下《css权威指南》，结合遇到的问题，这才了解到前前后后的问题根源。
主要的问题如下：
1.line-height是个什么东西，范围在哪里，具体应用于什么元素？
2.vertiacal-align和line-height有什么关系，元素对齐到底是一个什么样的过程。
3.图片对齐和文本对齐有什么区别？
4.浮动元素为什么对齐会出现问题？
-------》解答这些问题，牵涉的碎片化知识：
基线，底端，行内框，行框，行间距，替换元素及非替换元素，对齐
下面围绕着上面的三个问题，以及相应的碎片化知识点来进行解析问题。
一般来说，之所以不了解vertical-align，是因为不清楚对齐后面的这些碎片化知识，而这些也是很多博客在解析的时候常常忽略的地方。
先说结论：
1.line-height是行高，主要作用是在文本上下行间距，基于文本产生影响文本元素位置的作用，对于行内元素的位置影响显著，但是对于块元素的影响甚微。
2.vertical-align和line-height的关系是：line-height是vertical-align的对齐依据。vertical-align主要是影响行内元素的对齐，不影响块元素布局。
而决定行内元素对齐的有两个因素，1.元素本身的height（类似于图片和按钮等替换元素）2.还有其他span、em非替换元素的line-height。行框通过计算height，line-height，来将各个行内元素与行内的基线进行对齐。
但是当产生浮动的时候，浮动会对行内元素的布局产生特殊影响，因此不会按照原先的方式来进行对齐，此时设置了vertical-align往往没有效果。
3.图片的对齐是将自己的底端，也就是图片的最下端与行框的默认基线进行对齐，对齐依据是底端。影响图片对齐的依据是图片的height、padding、border大小。
而文本元素，例如<span>文本内容</span>，则是将自身的行内框基线与行框基线进行对齐，对齐依据是基线。影响行内文本元素的依据是line-height，以及元素自身的font属性。
4.元素浮动之后实际上是从正常的文档流中除去了（因此会出现高度塌陷，父容器收缩的问题），但是同时又对文档产生着影响（最经典的就是环绕效果）。元素浮动类似于一个被除名的黑户，虽然不在土地登记簿上，但是的的确确占用一块地方，因此别的元素也不能因此占据浮动元素的空间，但是因为是黑户，所以别的元素会环绕它，好像它不存在一样。
元素浮动之后，会尽力往容器的左右两侧移动，尽可能地“漂”到容器的最高处。
因此此时行内元素浮动之后，浮动的规则会覆盖vertical-align的规则，这个时候设置vertical-align往往会出现问题，最典型的就是对一个段落中的图片进行浮动，然后设置vertical-align，但是发现往往不起作用。
但是文本元素浮动之后往往不会受到影响，因为line-height实际上还是作用于文本元素的，虽然文本元素的容器位置“漂”到其他位置，但是里面的文本因为line-height，仍然有行高，可以影响到行内元素的布局。
-------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------我是分割线---------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------
结论如何推导出来
看完这些结论，想必很多人也是一时之间有些不明白所以然，因为不同的人掌握的背景知识是不同的，而这些结论的关键恰恰是这些关键性的碎片化知识，它们起到了穿针引线的作用。下面来梳理一下，到底是怎么得出结论的。
-------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------我是分割线---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------
1.核心问题：关于对齐
对齐涉及到两个对象，要对齐元素及对齐对象，一个对象是不可能对齐。比如平常在战队，从高往低对齐，每个人都要有一个参考系，对着参考系进行对齐。
而行内元素的对齐，除了行内元素本身，还有一个参考系，这个参考系就是行框的基线，而行框的基线依据于行内框元素的基线位置。
1.1对齐延伸问题：什么是基线？
每一个文本元素自身都会有四条线，顶线，中线，基线，底线。而基线一般是指文本元素中以x字母为准，x字母的下边缘为该文本元素的基线。
而行高则是两个文本行基线之间的距离，往往使段落产生间距。
但是也可以这样理解，行高 = 字体大小 + 上半行距 + 下半行距（其中上下半行距相等，这个等式可以从图中推导出来）
每一个文本元素和文本行元素，都会有一条基线，基线的位置受到文本的字体格式以及line-height的影响。
1.2对齐延伸问题：什么是行框和行内框？
在每一个段落行内，不同的行内元素除了包裹自身内容的内容框之外，还会自动生成一个行内框，其中没有标签包裹的文本会生成匿名行内框，不同的行内框会根据各自不同的line-height产生行间距，而行框则会刚好包括最高的顶端和最低的底端，从而来生成行框。
行内框的基线很好计算，但是行框的基线如何计算呢？
行框的基线是立足于行内框中基线最低的元素，也就是line-height最大的文本元素。
下面的例子，可以测试出来，当设置其中一个行内文本元素的line-height超过其他行内元素的line-height的时候，整个容器会自动扩展，位置也会往下移动。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试行框基线</title>
<style>
p{border:1px solid red;line-height:20px;}
span{line-height:40px;} /*可以在浏览器中取消一下，观察一下位置变动*/
</style>
</head>
<body>
<p>
<span>文本内容1</span> 匿名文本内容 <em>文本内容2</em> <img src="" alt="">
</p>
</body>
</html>
1.3对齐延伸问题：什么是替换元素。
替换元素是指元素的内容本身并非文档直接表现的，换句话说，就是不同的页面中，浏览器不能确定其具体内容的元素，比如图片，按钮，因为图片的内容取决于图片引用的src属性源，按钮的类型则依据于其input类型，因此浏览器是不能确定今天img元素里面是一张美女图片，那么明天加载的页面里面img是不是一张美女图片。
除了替换元素，其他的元素就是非替换元素。非替换元素和替换元素在行框中的影响，主要是其高度计算方式，替换元素在行框中的位置是由其height，padding和border来决定，而非替换元素在行框中的位置则是其line-height和字体样式。
1.4对齐延伸问题：图片等替换元素在行框中有什么影响。
如果只有文本元素的话，那么行框是很好计算基线位置的，但是如果有图片按钮等替换元素的话，那么计算方式就会变的稍微复杂一些。
在css中，有两种高度方式，一种是height，一种是line-height，这两种会决定元素的高度和位置，对于图片等行内替换元素来说，height是行框计算的依据，line-height对图片、按钮不会产生影响。
因此，如果有图片在行内的话，那么图片的底端会对齐文本的基线。
那么，如果图片的高度高于其他行内框的整体高度，这个时候会发生什么呢？
图片会在对齐原来的行框文本基线的基础上，撑开高度，使行框最高点刚好包括图片的顶端。
因此，当p段落里面的line-height都是40px的时候，加入图片之后，行框的高度就会比没有加入图片之前多50px - 40px=10px高度，因此基线就会下移10px的高度。
<p style=”line-height:40px;”> <span>文本内容1</span> <em>文本内容2</em> <img src="img/img2.png" height="50px" width="50px" alt="高度图片"> </p>
1.5对齐延伸问题：浮动对行内元素产生了什么样的影响。
设置一个元素的浮动之后，元素会从正常的文档流中去除，但是同时也会对原来的文档流产生一些影响。
可以设想一下，在长方形区域的水面上，有很多人都想要有一个固定位置的水床（浏览器盒模型布局），但是固定水床需要登记（告诉浏览器的如何布局计算）。突然有一天，有一个人想要在长方形区域的最左侧建一个水床（设置元素左浮动），它悄悄地从水底移动到最左侧，把原先的水床挤走（浮动元素会尽可能移动在到容器最高处，及最左处或最右处），在最左侧那里建了一所水床，没有登记（没有告知父容器高度，因此产生高度塌陷）。其他的人不知道，在去最左端的固定水床的时候，发现已经有人固定了，因此只能固定在它旁边（浮动会产生环绕效果，而这一点就是因为浮动元素从正常文档流中去除掉的原因）。
图片是属于替换元素，在行框中的计算中，是依据于图片的高度，如果图片进行浮动的话，对于行框来说，图片不存在了，因此，行框还是依据原来的文本行基线来计算基线，进行对齐。
因此，效果如下
<p style=”line-height:40px;”> <span>文本内容1</span> <em>文本内容2</em> <img src="img/img2.png" height="100px" width="100px" alt="高度图片"> </p>
图片没有浮动：
图片左浮动：
没有图片：
2.对齐的过程
行内元素是默认设置的vertical-align为baseline，也就是基线对齐。当一个文本行开始渲染的时候，
1.首先浏览器会找出每一个元素的类型，是替换元素还是非替换元素
2.然后根据它们的height或者line-height以及字体大小来生成每个元素行内框
3.确定行内框基线位置，确定行框基线位置
4.根据每个元素是否设置vertical-align来进行对齐。
3.关于居中对齐
vertical-align：middle是将元素行内框的中点与父元素基线上方0.5ex处的一个点对齐，这里的1ex相对于元素的font-size来计算x字母的高度，1ex等于该字体下x的字母高度。
多数浏览器会将1ex处理为0.5em，也就是0.5倍字体大小font-size。
参考文档：
《css权威指南》
张鑫旭文章：《css行高line-height的一些深入理解及应用》
原创文章，转载请注明地址！！！
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- css：背景（背景颜色、图片、平铺、背景固定、背景颜色半透 2020-06-01
- CSS背景图片的6个有趣的技巧 2020-05-12
- HTML连载84-添加中部的图片 2020-04-21
- 11.行盒垂直对齐和图片的底部白边问题 2020-04-17
- 1.图片元素<img>和<map>的联用 2020-04-07
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
