css vertical-align简单的应用

vertical-align属性值(我见过的)：

1、用来写在img标签上，让图片两旁的字与图片底部、顶部、中间对齐

vertical-align:text-top;                         

vertical-align:text-bottom;

vertical-align:middle;

<!--这是未对齐的代码-->

<div>这一图片前面的文字
  <img style="width:50px;height:50px" src="../assets/img/xiaomao.gif"/>这是图片后面的文字</div>

<!--这是两旁文字与图片顶部对齐的代码-->

<div>这一图片前面的文字
  <img style="vertical-align:text-top; width:50px; height:50px" 
  src="../assets/img/xiaomao.gif"/>这是图片后面的文字
</div>

<!--这是两旁文字与图片底部对齐的代码-->

<div>这一图片前面的文字
  <img style="vertical-align:text-bottom; width:50px; height:50px" 
  src="../assets/img/xiaomao.gif"/>这是图片后面的文字
</div>

<!--这是两旁文字与图片中间对齐的代码-->

<div>这一图片前面的文字
  <img style="vertical-align:middle; width:50px; height:50px" 
  src="../assets/img/xiaomao.gif"/>这是图片后面的文字
</div>

分别是下面三种效果：

没有对齐：

                  

文字与图片底部对齐：

                  

文字与图片顶部对齐：

                 

文字与图片中间对齐：