html讓同一行的文字和圖片居中對齊顯示
阿新 • • 發佈:2019-01-30
實現方法: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;
}