收藏
回答

为什么display:flex; align-items:center;不是能实现图片居中?

新手提问,为什么这里display:flex;      align-items:center;不是能实现图片居中?

<!--pages/homePage/homePage.wxml-->
<text>pages/homePage/homePage.wxml</text>
<view class="container">
    <swiper class="homeSwiper" indicator-dots="false" autoplay="true" duration="1000">
        <swiper-item wx:for="{{HomePageImage}}" class="HomePageImage">
            <text class="homeSwiperNote">{{item.note}}</text>
            <image class="HomePageImage" src="{{item.imagePath}}"></image>
        </swiper-item>
    </swiper>
</view>

 页面wxss

/* pages/homePage/homePage.wxss */
 .homeSwiper {
    height:40vh;
    width:100vw;
} 

.homeSwiperNote{
    position: absolute; 
    line-height1.5em;
    font-size: small;
    right50rpx;   
}

.homeSwiperImage{  
    display:flex;
     align-items:center;    
}

app.wxss

/**app.wxss**/
.container {
  position: absolute; 
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding10rpx 5rpx;
   /* box-sizing: border-box; */
最后一次编辑于  2020-12-23
回答关注问题邀请回答
收藏

2 个回答

  • AKA. 皮卡超
    AKA. 皮卡超
    2020-12-24

    2020-12-24
    有用 1
    回复 1
    • GXZ
      GXZ
      发表于移动端
      2020-12-24
      啊,谢谢,类名写错了
      2020-12-24
      回复
  • ?
    ?
    2020-12-23

    swiper-item给宽高 图片也记得给宽高

    2020-12-23
    有用
    回复
登录 后发表内容
问题标签