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

如果一个盒子有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%;        };