line-height
“行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。行内元素也设置;line-height是可以继承的通过计算继承的。把line-height设置为您需要的box的大小可以实现单行文字的垂直居中(不过必须要有内容，不然line-height不生效)
行内框，每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域，而设定行高时行内框高度不变，半行距【（行高-字体size）/2】分别增加/减少到内容区域的上下两边（深蓝色区域）
行框（line box），行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。
一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。这是div行高而不是height。所以行高可以通过line-height直接设置，也可以通过内部最大的行框高度决定
这里能显示高度是因为 div里有内容 如果是个 <div></div> 设置line-height是没有效果的
div { height: 240px;background-color:#e5edff;}
img { vertical-align: middle; }
<div >a<img src="http://image.zhangxinxu.com/image/study/s/s128/mm10.jpg"></div>
咦 怎么图片不居中啊?
把上面的div的height改成 line-height就可以了 height属性可有可无 必须有line-height因为vertical-align属性是相对于line-height的
div { height: 240px;background-color:#e5edff;line-height:150px}
img { vertical-align: middle; }
看line-height:150px 所以居中是相对于150px居中的，line-height是可以设置，如果不设置，就是默认文字的高度，或者图片的高度。 而且啊 在不是h5的声明下div里必须加内容文字啊之类的，不然line-height不起作用。在h5的声明下 有幽灵空白现象 想当于有有内容 所以只需vertical-align: middle;就可以,其实这个并不是完全居中其垂直中心是字符content area的中心，而对于字符x而言，都是比绝对中心位置要下沉的（不同字体下沉幅度不一样），换句更易懂的描述就是x的中心位置都是在字符内容区域高度中心点的下方，而这上下的偏差就是这里图片上下间距的偏差。
<p>
<span></span>
</p>
给p设置个line-height为100px span的line-height继承为100px
父子元素都有line-height属性会有问题，应该父为height 子为line-height。
其中使用伪类垂直居中直接这样子就可以
vertical-align第二种用法
vertical-align可以用在display:table-cell;元素的下面（典型的就是td）
vertical-alig
inline-block对其
display：inline-block，是基于baseline对齐的
一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。
.dib-baseline {
display: inline-block; width: 150px; height: 150px;
border: 1px solid #cad5eb; background-color: #f0f3f9;
}
<span class="dib-baseline"></span>
<span class="dib-baseline">x-baseline</span>
会发现，明明尺寸、display水平都是一样的，结果呢，两个却不在一个水平线上对齐，为什么呢？哈哈，上面的规范已经说明了一切。第一个框框里面没有内联元素，因此，基线就是容器的margin下边缘，也就是下边框下面的位置；而第二个框框里面有字符，纯正的内联元素，因此，第二个框框就是这些字符的基线，也就是字母x的下边缘了。因为行框内的行内框是基线对准的，如上文介绍行高与行内块一样。于是，我们就看到了框框1下边缘和框框2里面字符x底边对齐的好戏。
网友评论