如果一个盒子图片,文字,在同一行上,怎么实现文字始终对齐图片的中间位置呢?
方法就是使用vertical-align:middle;也就是给盒子都使用这个属性,需要注意的是:这个属性只对行内元素起作用,如果不是行内元素要加上diaplay:inline-block;
示例代码:
<div>
<img src="img/0.png">
<span>文字文字文字</span>
<input type="checkbox" name="" id="" value=""/>
</div>
css样式设置:
img {
padding-left: 0;
vertical-align: middle;
width: 100px;
height: 100px;
}
span {
vertical-align: middle;
padding-left: 0;
}
input {
vertical-align: middle;
display: inline-block;
width: 50px;
height: 50px;
}