小程序image组件中居中问题-微信小程序俱乐部 www.wxappclub.com

原创声明:本文为作者原创，未经允许不得转载，经授权转载需注明作者和出处

image组件中镶嵌在view组件中如何实现image组件水平居中
代码如下：
wxml如下：

<view class="infoLeft">
            <view class="leftTop">Content</view>
            <view class="leftBottom">
                <text>测试</text>
                <view class="leftBottomIn">
                    <image src="../images/cs/3037.png"  mode="aspectFit" ></image>
                </view>
            </view>
        </view>

wxss如下：

.infoLeft{
  width: 374rpx;
  background-color: #faf7f7;
  border-right: 2rpx solid white;
  border-bottom: 2rpx solid white;
  }
.leftTop{
  width: 100%;
  height: 80rpx;
  background-color: slategray;
}
.leftBottom{
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
}
.leftBottom text{
  width: 50%;
  padding-left:10rpx;
  background-color: goldenrod;
}
.leftBottom .leftBottomIn{
  width: 50%;
  align-items: center;
}
.leftBottomIn image{
  width: 80%;
  /*margin-left:5%;*/
  /*background-color: greenyellow;*/
}

效果如下：

.more{
display: flex;
flex-direction: row;
margin-top: 6rpx;
justify-content: center; //水平居中
align-items: center; //垂直居中
background-color: white;
}
.more image{
width: 80rpx;
height: 50rpx;
}