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

时间:2024-02-20 11:16: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" alt=""></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" alt="">
  文字 </div>
利用定位把照片固定住,padding-left让文字不遮住照片实现。

PS:以上CSS样式只写关键属性,具体样式根据不同需求自行调整。
本人只列举三种方法如果有何疑问或者本人写错之类的,欢迎大家指点讨论!