公告列表
公告列表
收藏
回答

请问使用flex布局无法让项目在主轴上居中对齐怎么解决?

page.wxml代码如下:

<view class="page">
  <view >
    <icon type="info" size="60" color="tomato"></icon>
  </view>
 
  <view >
    <text>本页面仅针对开发者开放</text>
  </view>
</view>

page.wxss代码如下:

.page{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center

}


想实现的效果:


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

5 个回答

  • 一世倾心
    一世倾心
    2019-12-07


    我用你的代码可以啊，就这么显示的

    2019-12-07
    有用 2
    回复 6
    • 北溟
      北溟
      2019-12-07
      我想让icon和text在页面正中显示
      2019-12-07
      赞
      回复
    • 一世倾心
      一世倾心
      2019-12-07回复北溟
      首先你有没有查看下你的结构，page大小是多少？ 给你代码接住，记得点赞
      2019-12-07
      赞 1
      回复
    • 北溟
      北溟
      2019-12-07回复一世倾心
      嗯嗯,明白了,找到问题所在了,谢谢~
      2019-12-07
      赞
      回复
    • 北溟
      北溟
      2019-12-07回复一世倾心
      不过我设置height:100%没用,必须写成100vh才行
      2019-12-07
      赞 1
      回复
    • 一世倾心
      一世倾心
      2019-12-07回复北溟
      因为外面还有一层，page   你得设置page 的宽高，里面的元素的宽高才是这个整个屏幕
      2019-12-07
      赞 1
      回复
    查看更多(1)
  • A🙃政
    A🙃政
    2019-12-07

    width height  得定义

    2019-12-07
    有用 1
    回复
  • 小满
    小满
    2019-12-07

    审查元素，你会看到问题。比如说page的实际高度

    2019-12-07
    有用 1
    回复 1
    • 北溟
      北溟
      2019-12-07
      嗯嗯,明白了,谢谢!
      2019-12-07
      赞
      回复
  • 建
    建
    2019-12-07

    .page{height:100vh;}

    2019-12-07
    有用 1
    回复 6
    • 北溟
      北溟
      2019-12-07
      啊可以了,感谢!
      2019-12-07
      赞
      回复
    • 北溟
      北溟
      2019-12-07
      请问vh是什么单位啊?
      2019-12-07
      赞
      回复
    • 建
      建
      2019-12-07回复北溟
      2019-12-07
      赞
      回复
    • 北溟
      北溟
      2019-12-07回复建
      了解了,谢谢~
      2019-12-07
      赞
      回复
    • 建
      建
      2019-12-07回复北溟
      % 的单位 是按父元素的宽/高来算的 ，你父元素没给值，子元素的高度就是子元素内容的实际高度。小程序页面最外层有个page标签，它的高度是按内容的高度来算的
      2019-12-07
      赞 1
      回复
    查看更多(1)
  • 哈哈哈叶
    哈哈哈叶
    2020-05-06
    <view class="search" >   
 <input placeholder="请输入要搜索的内容"></input>
</view>

    wxss

    .search{
    width: 80vw;
    height: 60rpx;
    display: flex;
    flex-direction: row;
    border: 1px solid slategray;
    border-radius: 40rpx;
    padding-left: 50rpx;
    align-items: center;
    align-self:center;
    
}

    为什么这个框无法居中啊


    2020-05-06
    有用
    回复
请 登录 后发表内容
相关文档
问题标签
wxsspage代码wxml布局