为什么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-height: 1.5em;
font-size: small;
right: 50rpx;
}
.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;
padding: 10rpx 5rpx;
/* box-sizing: border-box; */