代码已上传至github github代码地址:https://github.com/Miofly/mio.git
最近写原生H5项目,让图片居中时,有时候会有flex布局或者position定位,使其居中,偶尔还会使用margin或者padding进行微调,此写法在大部分手机端以及开发者工具上面都是正常。很意外的是在一些手机上总是不适配。
以下是解决方法
多个img标签需要居中,最好在img外层包装一个div
示例如下
使用position:absolute,left设为0,宽度设为100%,再加上text-align:center完美居中
<div v-show="true" style="position: relative;">
<img style="z-index: 1;" :src="gy" class="full-width-height">
<div style="z-index: 3;position: absolute;top: 1.81rem;left: 0;width: 100%;text-align: center;">
<img style="width: 2.06rem;height: 2.07rem" :src="yuanpan">
</div>
<div style="z-index: 5;position: absolute;top: 1.24rem;left: 0;width: 100%;text-align: center;">
<img class="xuanzhun" style="width: 3.16rem;height: 3.2rem" :src="guang">
</div>
<div style="z-index: 7;position: absolute;top: 2.29rem;text-align: center;left: 0;width: 100%">
<img style="width: 2.87rem;height: 4.15rem;" :src="guanyin">
</div>
</div>
以前给img标签居中,我基本都是直接使用flex布局或者一些其他方法,直接在img标签上给img进行居中,但这种方法存在太多问题,特此警戒