深入理解line-height和vertical-align

 

什么是行高（line-height）？

line-height用于设置文本的最小行高，可以简单理解为一行文字所占据的高度。但是行高的严格的定义是：两行文字基线（baseline）之间的距离。

 

注意区分height和line-height的区别：

 

height：元素的整体高度；

line-height：元素中一行文字所占据的高度；

如果想要文字在元素内部垂直居中，让line-height等于元素的height即可；

 

vertical-align属性

参考官方文档的解释，vertical-align会影响行内级元素在一个行盒（line boxes）中垂直方向的位置。简单来说vertical-align可以设置行内级元素在一行上的对齐方式。

 

vertical-align的属性值

 

baseline：默认值、基线对齐；

 

top：把行内级盒子的顶部与行盒的顶部对齐；

 

middle：行内级盒子的中心点与父盒中小写字母x的中心点的线对齐；

 

bottom：吧行内级盒子的底部与行盒的底部对齐；