在使用vertical-align:middle实现垂直居中的时候，经常会发现不生效的情况。这里需要注意它生效需要满足的条件：

CSS解决vertical-align作用环境：

父元素设置line-height。需要和height一致。或者将display属性设置为table-cell，将块元素转化为单元格。

CSS解决vertical-align作用对象：

子元素中的inline-block和inline元素。

<div class="box">

  <img src=".\test.jpg"/>

  <span>内部文字</span>

</div>

<style>

.box{

  width:300px; 

  line-height: 300px;

  font-size: 16px; 

}

.box img{

  width: 30px; 

  height:30px; 

  vertical-align:middle

}

.box span{

  vertical-align:middle

}

</style>

土嘎嘎友情提示：vertical-align不可继承，必须对子元素单独设置。同时需要注意的是line-height的高度基于font-size（即字体的高度），如果文字要转行会出现异常哦。