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

如果一个盒子图片，文字，在同一行上，怎么实现文字始终对齐图片的中间位置呢？ 
方法就是使用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;
            }