欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

html让同一行的文字和图片居中对齐显示

程序员文章站 2022-04-24 22:13:38
...

实现方法:css属性->vertical-align:middle

给行内的每个内容标签都加上这个属性(注:改属性只对行内元素起作用,如果不是行内元素要加上diaplay:inline-block);

实现效果如图:(rem布局)

html让同一行的文字和图片居中对齐显示


    <div class="satisDiv span12 borderB pad10px h44">
        <span class="fs028rem ">满意度:</span>
        <span class="ml030rem fs028rem">十分满意</span>
        <img class="ml020rem" data-rateLevel="1" src="images/applicationForCar/unchooseico.png" width="16px;">
        <span class="ml030rem fs028rem">满意</span>
        <img class="ml020rem" data-rateLevel="2" src="images/applicationForCar/unchooseico.png" width="16px;"> 
        <span class="ml030rem fs028rem">一般</span>
        <img class="ml020rem" data-rateLevel="3" src="images/applicationForCar/unchooseico.png" width="16px;">
    </div>

css:

.satisDiv span,img{
    padding-left:0;
    vertical-align:middle;
    display:inline-block;
    float: none;
}