vertical-align 垂直对齐方式、基线对齐

1、vertical-align的属性值以及效果

vertical-align:baseline        默认对齐方式，基线对齐

vertical-align:top                顶部对齐

vertical-align:middle           中部对齐

vertical-align:bottom          底部对齐

补充1：基线对齐：

        浏览器的默认对齐方式是baseline，也就是基线对齐，就以上面写的为例，如图所示，横线为基线，在基线对齐下，一些文字或字母的下面一部分会凸出来；而浏览器也会将行内以及行内块标签当作文字进行处理，也就是基线对齐，比如图片和文字，文本框和文字对齐时，会出现上面或下面对不准的情况。这时就需要使用 vertical-align的其他属性进行对齐。

1-1

基线对齐的示例效果图1： 

文本框+图片+字符

         上图就是基线对齐方式，文本框、图片和文本的底部都不对齐

基线对齐的示例效果图2： 

         当父级盒子没有加高度时，正常情况下是应该由内容撑开，如上图所示，在图片下方，依然空出了一部分空间，这也是基线对齐导致的。

上图的解决方法有两种：

第一种：在图片中添加 vertical-align:middle ，即可

第二种：根据浏览器的特点（如上文橙色标注部分），只要将图片转换成块级元素，浏览器                便不会使用基线对齐方式。

 补充2：图片元素的垂直对齐方式vertical-align，在浏览器的标准模式                下默认为baseline，在怪异模式下默认为bottom。