收藏
回答

如何实现图片居中显示?

<scroll-view scroll-y="true">

  <image src="/images/one.jpgstyle="width:90%; margin-top:200rpx;mode="widthFix"></image>

</scroll-view>

我想做一个欢迎页面,就一张图片居中显示然后下面一个按钮跳转到首页,但是就卡在图片这里了:使用过align-items\align-content\align-self\text-align等等属性,都没办法让它居中,请大家指导一下应该怎么做,谢谢谢谢~~~

回答关注问题邀请回答
收藏

5 个回答

  • ZHOU
    ZHOU
    2020-06-29

    你外面别用scroll-view,直接用view,宽高设置全屏 width: 100%; height: 100vh,然后居中用:display: flex; flex-direction: column; justify-content: center; align-items: center;

    还有一种方法就是定位了:position: absolute; top: 50%; left 50%; transform: translate(-50%, -50%)

    2020-06-29
    有用 1
    回复
  • 俊杰Hiro
    俊杰Hiro
    2020-06-29

    首先最外层没必要用scroll-view。其次没表明是想垂直居中还是水平居中,水平最快:margin:0 auto; 垂直则根据场景有多种实现方式,不想纠结可以直接上flex布局。

    2020-06-29
    有用 1
    回复
  • 神经蛙
    神经蛙
    2020-06-29

    image的容器元素要设置flex; 然后image设置 justify-content: center; align-items: center;

    2020-06-29
    有用 1
    回复
  • _天马行空_ᯤ⁶ᴳ
    _天马行空_ᯤ⁶ᴳ
    2020-06-29

    外边包个view,让view居中

    2020-06-29
    有用 1
    回复
  • 陈Zj
    陈Zj
    2020-06-29

    我刚刚试着加了个view就成功了。。。果然scroll-view还是不会用啊,谢谢各位大神!

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