移動端圖片文字垂直置中實現方法

標籤：寫法   add   效果   固定   調整   ack   web   class   inline   

最近在開發公眾號的時候遇到圖片與文字置中的問題。例如我們要實作類別似以下這樣效果：

或者。

 在開發過程中， 可能我本身代碼原因或者相容原因，在ios和安卓端很難完全實現這樣的置中效果。

 為了實現這樣的寫法，同時相容ios與安卓端，我採用了以下三種方法來實現（以下代碼我唯寫主要的屬性，具體樣式大家各自根據自己需求添加）：

一、display：table和display:table-cell使用；

例如： 

1 <div style="display:table；vertical-align: middle;"> 2　　　　<span class="display:table-cell；vertical-align:middle"><img src="/Images/user/shoujinotice.png" width="12" height="12" ></span>4 　　　 <span class="display:table-cell；vertical-align:middle">文字</span> 5 </div>

通過這樣的CSS樣式組合實現。

二、利用背景實現；

例如：

<style>

　　div{background: url(/Images/shop/cpbh.png) no-repeat left;

1. background-size: 14px;
2. display: inline-block;
3. padding-left: 20px;
4. color: #222;
5. }

</style>

<div>文字</div>

通過背景引用圖片，然後利用padding-left屬性，讓文字不遮擋圖片；如果遇到圖片偏離，我們還可以利用background-position屬性來調整圖片位置。

三、利用定位來解決。

<style>

　　div{

　　position:relative;

      padding-left: 20px;

}

    div img{

　　position:absolute;

　　top:0;

  　 left:4px

}

</style>

<div style="position:relative"> 　　<img src="/Images/user/shoujinotice.png" width="12" height="12" >
　　文字</div>
利用定位把照片固定住，padding-left讓文字不遮住照片實現。

PS:以上CSS樣式唯寫關鍵屬性，具體樣式根據不同需求自行調整。
本人只列舉三種方法如果有何疑問或者本人寫錯之類的，歡迎大家指點討論！

移動端圖片文字垂直置中實現方法