让图片和文字居中对齐的方法

如果一个盒子有2列或者3列排列，有图片，有文字，怎么实现文字始终对齐图片的中间位置呢？

方法就是使用vertical-align:middle;也就是给一列都使用这个属性，需要注意的是：这个属性只对行内元素起作用，如果不是行内元素要加上diaplay:inline-block;如图

<ul>
<li>
<img src="image/qq.jpg" class="imgw col-xs-3">
<span class="col-xs-7 fb">昵称</span>
<input class="col-xs-1 heckr" type="checkbox">
</li>
</ul>

样式设置：

img{
padding-left:0;
vertical-align:middle;
display:inline-block;
float: none;
};
span{
padding-left: 0;
float: none;
display:inline-block;
vertical-align:middle;
};
input{
vertical-align:middle;
float: none;
margin-right:0;
border-radius: 50%;
};