微信小程序开发中的图片缺少后自动居中问题的解决，自动居中样式，自适应图片多少的写法

打工人C&K

于 2023-12-08 13:29:12 发布

阅读量732

点赞数

CC 4.0 BY-SA版权

文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/sharp0016/article/details/134876135

本文描述了在WXML中使用类似HTML的结构创建父样式`home-grid`，并利用CSS的flexbox属性（如justify-content和align-items）实现子组件（如`yellowstar`、`maintain`和`StateOfLife`）的定位和对齐。作者还提到如何调整样式以实现图片缺失后的居中显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面是写的wxml的view样式类似于web开发中的HTML文件
home-grid是我创建的一个父样式，采用子绝父相的定位方式
我在home-grid的父view（类似于web中div）中包含了三个小的子样式分别是下述代码中的class=“yellowstar”，class=“maintain”，**class=“StateOfLife”**三个样式，其中分别包含了图片+文字

 <view class="home-grid">
      <i-grid-item wx:if="{{install}}" i-class="i-grid-item" 
   bind:tap="tiaozhuan">
      <view class="yellowstar">
      <text class="installnumone">12</text>
        <image class="installpicone" src="../../images/num.svg"></image>//可忽略
          <image class="installpic" src="../../images/installpic.svg"></image>//主要图片
          <i-grid-label class="installzi">我要安装</i-grid-label>
        </view>
      </i-grid-item>
      <i-grid-item wx:if="{{Repair}}" i-class="i-grid-item" bind:tap="weixiu">
        <view class="maintain">
          <text class="installnumone">12</text>
          <image class="installpicone" src="../../images/num.svg"></image>
          <i-grid-icon>
            <image class="Maintenancepic" src="../../images/Maintenance.svg"></image>
          </i-grid-icon>
          <i-grid-item class="Maintenancezi">我要维修</i-grid-item>
        </view>
      </i-grid-item>

      <i-grid-item wx:if="{{lifecycle}}" i-class="i-grid-item" bind:tap="lifecycle">
        <view class="StateOfLife">
          <i-grid-icon>
            <image class="lifecycle" src="../../images/lifecycle.svg"></image>
          </i-grid-icon>
          <i-grid-item class="lifecyclezi">设备生命周期</i-grid-item>
        </view>
      </i-grid-item>
  </view>

下面的代码是三个class的样式

.yellowstar, .maintain, .StateOfLife {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: -6rpx;
  width: 260rpx;
  height: 300rpx;
  align-items: center;
}

下面是父样式

.home-grid {
  position: relative;
  display: flex;
  width: 100%;
  height: auto;
  justify-content: left;
  align-items: center;
}

justify-content: left;的样式我写的是左对齐，改为center即可居中对齐
然后实现图片缺少后自动居中问题