首页 > 代码库 > vertical-align 和line-height
vertical-align 和line-height
line-height是相对于font-size来计算的，vertical-align的百分比值是相对于line-height来计算的，vertical-align的默认是baseline;
demo：
font-size:20px;
line-height:1.2;
line-height的值其实就是1.2*20=24px;
demo:
line-height:20px;
vertical-align:30%;
vertical-align相当于6px
vertical-align和line-height的关系从HTML5文档声明开始的，因此，以下探讨的现象，都是在页面为HTML5声明前提下，类似下面的doctype:
<!doctype html>
<html>
对于内联元素，vertical-align与line-height虽然看不见，但实际上「到处都是」！
例如：
div中包裹一个img元素，会发现img的下方会有空白，那是因为：
块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点，vertical-align的默认值是baseline，图片与空白节点的baseline对齐，所以就有空白节点；
baseline介绍：
在各种内联相关模型中，凡是涉及到垂直方向的排版或者对齐的，都离不开最最基本的基线(baseline)。例如，line-height行高的定义就是两基线的间距；vertical-align的默认值就是基线；其他中线顶线一类的定义也离不开基线；
字母x的下边缘(线)就是我们的基线。
CSS中有一个概念叫做"x-height", 指的是字母‘x‘的高度。
vertical-align: middle：middle指的是基线往上1/2 "x-height"高度。我们可以近似脑补成字母x交叉点那个位置。
vertical-align: middle并不是绝对的垂直居中对齐，我们平常看到的middle效果只是一种近似的效果。原因很简单，因为不同的字体，其在行内盒子中的位置是不一样的，比方说’微软雅黑’就是一个字符下沉比较明显的字体，所有字符的位置相比其他字体要偏下一点。要是vertical-align: middle是相对容器中分线对齐，呵呵，你会发现图标和文字不在一条线上，而相对于字符x的中心位置对齐，我们肉眼看上去就好像和文字居中对齐了。
ex是CSS中的一个相对单位，指的的是小写字母x的高度，没错，就是指"x-height".
ex的价值：不受字体字号影响的内联元素的垂直居中对齐效果。
内联元素默认是基线对齐的，而基线就是x的底部，而1ex就是一个x的高度。设想下，假如我们图标高度就是1ex, 同时背景图片居中，岂不是图标和文字天然垂直居中，而且，完全不受字体和字号的影响。因为ex就是一个相对于字体字号的单位。
虽然使用ex做高度实现天然垂直对齐看上去很巧妙，但是，也是有局限的，就是如果图标背景的高度超过1ex，我们就只能使用vertical-align。由于IE6-IE7对内联模型的解释有问题，因此，各类vertical-align在这些浏览器下都是有问题，包括这里的ex天然基线对齐，需要特别处理下。
让vertical-align失效：
1 修改vertical-align的值为非baseline
2 内联元素块级化
3 设置元素定位position
4 设置元素浮动 float
5 设置父元素font-size=0（如果元素的line-height是相对值）,消除空白节点line-height的影响
实现img标签的垂直居中：
因为有空白节点，可以通过设置line-height来设置父元素的高度，line-height只能作用在字符上才会有高度
1 line-height 设置父元素的高度
2 设置img vertical-align为middle。这时候img近似垂直居中，因为有空白节点的影响，这时候实际上食欲空白节点的baseline对齐
3 设置父元素font-size=0；消除空白节点的影响 实现img完全的垂直居中
这种通过line-height定高，元素vertical-align:middle垂直居中的方法不仅适用于现代浏览器，连IE7浏览器也是支持的
不过和其他浏览器再使用上还是有些需要注意的地方，就是，HTML不能这样：
<div><img src="mm1.jpg"></div>
而是需要在图片标签结束处留下空格后者换行：
<div><img src="mm1.jpg"><!-- 这里要折行或空格 --> </div>
来自：http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
vertical-align 和line-height