1. 程式人生 > >html讓同一行的文字和圖片居中對齊顯示

html讓同一行的文字和圖片居中對齊顯示

實現方法: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;
}