垂直对齐就是相对于外部容器垂直方向的对齐方式，如下三种方式：
1、垂直居中对齐：
css：vertical-align:middle
示例：
2、垂直底部对齐：
css：vertical-align:bottom
示例：
3、垂直顶部对齐：
css：vertical-align:top
示例：
vertical-align是什么？设置元素的垂直对齐方式。
注意点：
text-align是设置给需要对齐元素的父元素，
vertical-align是设置给需要对齐的那个元素本身，
vertical-align只对行内元素有效。
/*默认情况下图片和一行文字的基线对齐，
基线就是一行文字中最短那个文字的底部*/
vertrical-align:baseline
/*图片和父元素的顶部对齐*/
vertrical-align:top
/*图片和父元素的底部对齐*/
vertrical-align:bottom
/*图片和一行文字的顶部对齐*/
vertrical-align:text-top
/*图片和一行文字的底部对齐*/
vertrical-align:text-bottom
vertical-align: middle是说这个属性么
这个属性严格意义上说并不是垂直居中
它只是让行内元素（文字和图片等）以自身为参照中对齐（top是顶对齐）
但这个参照不是绝对的，他受行高等因素影响(及浏览器的兼容)所以设置了对齐以后往往达不到自己想要的结果。
浏览器的垂直居中是个挺麻烦的事，简单的文字图片的对齐 可以用vertical-align，但稍微复杂点的就不好使啦
通常会用js计算高度在设置其他属性让目标元素居中
目前为止只有table的垂直居中属性 是真正意义上 且不需要js的垂直居中
