垂直对齐就是相对于外部容器垂直方向的对齐方式，如下三种方式：
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的垂直居中
![[Quora] 论如何才能悄无声息地破坏室友的电脑](/aiimages/%5BQuora%5D+%E8%AE%BA%E5%A6%82%E4%BD%95%E6%89%8D%E8%83%BD%E6%82%84%E6%97%A0%E5%A3%B0%E6%81%AF%E5%9C%B0%E7%A0%B4%E5%9D%8F%E5%AE%A4%E5%8F%8B%E7%9A%84%E7%94%B5%E8%84%91.png)
