移动端图片文字垂直居中实现方法

Posted 2020-09-20

最近在开发微信公众号的时候遇到图片与文字居中的问题。例如我们要实现类似以下这样效果：

或者。

 在开发过程中， 可能我本身代码原因或者兼容原因，在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样式只写关键属性，具体样式根据不同需求自行调整。
本人只列举三种方法如果有何疑问或者本人写错之类的，欢迎大家指点讨论！