CSS中vertical-align属性

参考：https://www.cnblogs.com/starof/p/4512284.html?utm_source=tuicool&utm_medium=referral”
vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。默认值：baseline

vertical-align影响inline-level元素和table-cell元素垂直方向上的布局。即只有元素属于以下元素时 ，vertical-align属性才会起作用

1.inline水平的元素

     inline:<img>,<span>,<strong>,<em>,未知元素
     inline-block:<input>(IE8+),<button><IE8+>....

2.table-cell元素

     table-cell:<td>

可能的值

• 默认 | 元素放置在父元素的基线上。
• sub | 垂直对齐文本的下标。
• super | 垂直对齐文本的上标
• top | 把元素的顶端与行中最高元素的顶端对齐
• text-top | 把元素的顶端与父元素字体的顶端对齐
• middle | 把此元素放置在父元素的中部。
• bottom | 把元素的顶端与行中最低的元素的顶端对齐。
• text-bottom | 把元素的底端与父元素字体的底端对齐。
• length
• % | 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
• inherit | 规定应该从父元素继承 vertical-align 属性的值。

关于baseline

字母x的下边缘就是baseline
1、inline-table元素的baseline是它的table第一行的baseline。

2、父元素line box的baseline是最后一个inline box 的baseline。

3、inline-block元素的baseline确定规则

规则1：inline-block元素，如果内部有line box，则inline-block元素的baseline就是最后一个作为内容存在的元素[inline box]的baseline，而这个元素的baseline的确定就要根据它自身来定了。

规则2：inline-block元素，如果其内部没有line box或它的overflow属性不是visible，那么baseline将是这个inline-block元素的底margin边界。