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

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

    原文作者:luoyu6
    原文地址: https://blog.csdn.net/luoyu6/article/details/83150372
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞