最近在开发微信公众号的时候遇到图片与文字居中的问题。例如我们要实现类似以下这样效果:
或者。
为了实现这样的写法,同时兼容ios与安卓端,我采用了以下三种方法来实现(以下代码我只写主要的属性,具体样式大家各自根据自己需求添加):
例如:
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:
- background-size:
- display:
- padding-left:
- color:
</style>
<div>文字</div>
通过背景引用图片,然后利用padding-left属性,让文字不遮挡图片;如果遇到图片偏离,我们还可以利用background-position属性来调整图片位置。
三、利用定位来解决。
<style>
div{
position:relative;
padding-left:
}
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样式只写关键属性,具体样式根据不同需求自行调整。
本人只列举三种方法如果有何疑问或者本人写错之类的,欢迎大家指点讨论!