圖片跟文字垂直對齊 vertical-align: middle;
阿新 • • 發佈:2020-12-21
技術標籤:css
//html 程式碼
<a href="#" class="product-item-name">
<img class="car-logo" src="../assets/static/images/car_logo.png">豐田 ALPHARD FACELIFT 3.5 SC
</a>
//css 程式碼
.product-item-name {
height: rem(24px);
line-height:rem(24px);
font-size: rem(14px);
}
.car-logo {
display: inline-block;
height: rem(22px);
margin-right: rem(5px);
}
沒加vertical-align: middle;之前
加了之後的效果 ,注意vertical-align: middle;是加給圖片的
.car-logo {
display: inline-block;
height: rem(22px);
margin-right: rem(5px);
vertical-align: middle; //加到圖片上
}