vertical-align详解

Tips：内容主要来源于pink老师。看到很多关于这方面的文章，对于基线、中线、顶线和底线的解释不够简单，觉得pink老师画的图简直一目了然，直接爱了~

1、定义

vertical-align 属性设置元素的垂直对齐方式。

2、vertical-align常用属性值

1. baseline：默认值，元素放置在父元素的基线上。
2. top：把元素的顶端与行中最高元素的顶端对齐；
3. middle：把此元素放置在父元素的中部。
4. bottom：把元素的顶端与行中最低的元素的顶端对齐。

3、属性值图解

4、常用场景

将图片或表单元素（行内块）和文字垂直居中。即vertical-align:middle。