设置图片和文字的对齐方式

可以使用vertical-align来设置文字和图片的对齐方式,但这个属性只对行内元素起作用，如果想对块级元素也生效，需要同时给块级元素设置dispaly：table-cell才行。
图片和文字默认是底部对齐的，如果想改变对其方式，给图片设置vertical-align就可以改变他们的对齐方式:
html结构:

 <div class="wrapper">
    <img src="images/cat.jpg" >
    <span>一只可爱的小猫</span>
  </div>

css样式:

  <style>
   img{
            /* vertical-align: top; */ //顶部对齐
            /* vertical-align: middle; */ //中间对齐
            /* vertical-align: bottom; */ //底部对齐
            /* vertical-align: text-top; */ //和top效果一样
            vertical-align: text-bottom; //和bottom效果一样
        }
  </style>

效果图如下:

top:

middle:

bottom: