提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

H5端关于img居中的一个兼容性bug

BUGH5 一个 关于 兼容性 居中 img
2023-06-13 09:14:09 时间

代码已上传至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进行居中，但这种方法存在太多问题，特此警戒

相关文章