首頁 > web前端 > css教學 > 主體

css圖示與文字對齊的兩種實作方法說明

高洛峰
發布: 2017-03-09 10:15:04
原創
2169 人瀏覽過

在平常寫頁面的過程中,常遇到要把小圖示與文字對齊的情況。如:

                                                                為css圖示與文字對齊的兩種實作方法說明

第一種

    對img設定垂直方向對齊為middle,

<p>
        <img src="" alt="" class="heart">
        <span>1169</span>
        <img src="" alt="" class="comment">
        <span>1168</span>
</p>
登入後複製
p{    
     height:30px;    
     line-hight:30px;    
}    
.heart,.comment{    
        vertical-align:middle;    
}
登入後複製


#第二種

把小圖示設為背景圖片,調整padding

<p>
        <span class="heart">1169</span>
        <span class="comment">1168</span>
</p>
登入後複製


.hear{    
        background:url(images/heart.png) left center no-repeat;    
        margin-right:20px;    
}    
.comment{    
        background:url(images/comment.png) left center no-repeat;    
}    
.hear,.comment{    
        height:30px;    
        line-height:30px;    
        padding-left:20px;    
}
登入後複製


以上這篇css圖示與文字對齊的兩種實作方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持PHP中文網。

以上是css圖示與文字對齊的兩種實作方法說明的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!