html让同一行的文字和图片居中对齐显示
程序员文章站
2022-04-24 22:13:38
...
实现方法:css属性->vertical-align:middle
给行内的每个内容标签都加上这个属性(注:改属性只对行内元素起作用,如果不是行内元素要加上diaplay:inline-block);
实现效果如图:(rem布局)
<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;
}
上一篇: Web 前端学习之 HTML 的标签
下一篇: 元素 垂直居中排列