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