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

YourTools

发布于 2022-10-28 10:28:02

6140

文章被收录于专栏：WflynnWebWflynnWeb

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

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-05-04，如有侵权请联系 cloudcommunity@tencent.com 删除

github