收藏
回答

请问使用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{
        width80vw;
        height60rpx;
        display: flex;
        flex-direction: row;
        border1px solid slategray;
        border-radius40rpx;
        padding-left50rpx;
        align-items: center;
        align-self:center;
        
    }
    

    为什么这个框无法居中啊


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