vertical-align 只能应用于inline水平以及table-cell元素
- inline 水平 img，span，strong，em ...
- inline-block input button...
- table-cell table-cell: 总结：默认状态下vertical-align支持 图片、按钮、文字和单元格。
属性值：
- inherit
- 线类(baseline,top,middle,bottom)
- 文本类(text-top,text-bottom)
- 上标下标类(sub,super)
- 数值百分比类(20px,2em,20%，-10px)
小知识: css中支持负值的 margin、letter-spacing、word-spacing、vertical-align
vertical-align 百分比值是相对于行高计算的，比如vertical-align:-10%，如果行高是30px,那么vertical-align：-10%*30=-3px。
示例：
图片文字垂直居中对齐
<p> 文字1<img src="xxx.jpg">文字2</p>
img{ vertical-align:middle }
- 图片文字垂直居中对齐
p{ display:table-cell;vertical-align:middle }
- 图片文字垂直居中对齐
<div class="test-list">
<span>文字</span>
<img src="xxx.jpg">
</div>
.test-list >span { display:inline-blcok; text-align: justify; vertical-align:middle }
.test-list >img { vertical-align:middle }
线类类对齐的本质
vertical-align：baseline,top,middle,bottom，是文字和父级的content area的1/2基线对齐的。
content area 是由文字大小决定的
文本类对齐的本质
vertical-align:text-top,text-bottom,是文字和父级的content area的顶部对齐。
content area 是由文字大小决定的
上标下标
vertical-align:sub,super，将文字提高到父级合适的上标基线位置或下标基线位置。
相邻元素vertical-align不同基线表现
根据原理，都是相对父级的content area基线，所有它们之间根本不会互相影响。
应用：
小图标跟文字对齐
img{vertical-align:-10px}(百分比值是相对于行高计算的)
不定尺寸图片或多行文字的垂直居中
- 主体元素inline-block化
- 0宽度100%高度辅助元素
- vertical-align:middle 例如：
<p style="height:200px">
<img style="vertical-align:middle" src="mm1.jpg"><i style="display:inline-block;height:100%;vertical-align:middle"></i>
</p>
不定大小文字垂直居中
<p style="height:200px">
<span>...</span><i></i>
</p>
<style>
span{display:inline-block;vertical-align:middle}
i{display:inline-block;height:100%;vertical-align:middle}
</style>
