小程序image组件中居中问题

  • • 发表于 2年前
  • • 作者 十方
  • • 3361 次浏览
  • • 3 条评论
  • • 最后编辑时间 2年前
  • • 来自 [问 答]

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

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;*/
}

效果如下:

`

分享到:
评论区(共3条评论)
3条评论
Ctrl+Enter
作者

十方

十方

APP:1 帖子:4 回复:46 积分:97

已加入社区[629]天

主人太懒,签名没设置!

作者详情》
Top