vertial-align

--- 深入理解vertial-align属性

⭐️一种实现子元素垂直居中的方法：

::after{
 display: inline-block;
 content:'';
 width: 0;
 height: height;
 vertial-align: middle;
}  /*其他inline-block也设置为：vertial-align: middle;*/</pre>

❓两个div 都设置 display：inline-block，正常显示；但是在第二个div中加一个块级元素或者内联元素，显示就变了个样

⚠️解决方案是给第一个div设置vertial-align: top

为什么呢？

'vertical-align'
Value:      baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial:      baseline
Applies to:      inline-level and 'table-cell' elements
Inherited:      no
Percentages:      refer to the 'line-height' of the element itself
Media:      visual
Computed value:      for <percentage> and <length> the absolute length, otherwise as specified</pre>

适用于：

inline水平的元素

• inline:<img>,<span>,<strong>,<em>,未知元素

• inline-block:<input>(IE8+),<button><IE8+>....

'table-cell'元素

• table-cell:<td>

所以默认情况下，图片，按钮，文字和单元格都可以用vertical-align属性。

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边界。