CSS vertical-align 属性的简单用法？

（测试环境：chrome）

CSS vertical-align属性：设置元素的垂直对齐方式

通过几个例子来看：

第一个：正常情况下，我们在段落中嵌套一个图片，不添加vertical-align属性

代码：

     
         
           
     
     
         
test testtest test
     

显示效果：

                        

 第二个: 我们试用一下 vertical-align 属性，设置 vertical-align:baseline;

 代码：

     
         
          
          
    
     
     
         
test testtest test
     

显示效果：可以看出 默认情况下和 basline值下的显示效果是一致的；

                  

 第三个：上面使用baseline值，下面我们使用sub 和super看看，

              sub：垂直对齐文本的下标；

              super：垂直对齐文本的上标；

              代码忽略，直接修改上面的  vertical-align : sub/super;

              显示效果1（sub）：   

                                  

              显示效果2（super）：                           

                           

   第四个：我们再看看  top  bottom  middle  这三个的显示效果；

               显示效果1（top）：把元素的顶端和行中最高元素的顶端对齐

                                 

               显示效果2（bottom）：把元素的顶端和行中最低元素的顶端对齐

                            

               显示效果3（middle）：把元素放在父元素的中部

                                

其余的几个值自行测试吧。。。。