如何使微信小程序盒子内容居中显示

最新推荐文章于 2023-07-28 17:44:30 发布

CC2836

最新推荐文章于 2023-07-28 17:44:30 发布

阅读量4.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/CC2836/article/details/86628226

小程序专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用Flex布局简化小程序UI设计。通过对比传统CSS布局，展示Flex布局在小程序开发中的优势，如更简洁的代码和更好的响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述这个未设置之前的样式

未修改之前的WXML代码

<view class='container'>
  <image class='user-avatar' src='/images/fengjing.jpg'></image>
  <text class='user-name'>Hello World</text>
  <view>
    <text>开始小程序之旅</text>
  </view>
</view>



如果用以前CSS写就会很麻烦，这个时候可以用flex布局
WXSS代码如下：

.container{
  display: flex;/* 如果把盒子设置为弹性盒子,必须要加的 */
  flex-direction: column;/* 设置一个大盒子内容垂直排列*/
  align-items: center;/* 设置一个大盒子内容居中排列*/
}

设置效果如下：
在这里插入图片描述