微信小程序居中布局css

AnRFDev

发布于 2021-02-01 15:22:26

6.1K0

发布于 2021-02-01 15:22:26

文章被收录于专栏：AnRFDevAnRFDev

本文链接

居中放置元素是一个比较常见的需求。

可以水平居中，垂直居中。同时水平和垂直居中等等。

在Android的RelativeLayout中，可以使用android:layout_centerInParent="true"。

在小程序中我们该怎么做呢？

居中示例

下面列举几个居中的例子。

水平居中

wxml中放置一个view。

<view class="flex-center-in-row">
  Rust Fisher 水平方向居中
</view>

wxss中的class。使用了flex布局，设置justify-content: center;。

.flex-center-in-row {
  background: #eaeaea;
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 40px;
}

垂直居中

垂直方向居中。

<view class="flex-center-in-column">
  Rust Fisher 垂直方向居中
</view>

确定它的高度，设置display: flex; align-items: center;。

.flex-center-in-column {
  display: flex;
  align-items: center;
  height: 60px;
}

水平并且垂直居中

要居中，需要确定宽和高。

<view class="flex-center-in-cube">
  Rust Fisher 方块内居中
</view>

需要设置flex布局，justify-content: center; align-items: center;。

.flex-center-in-cube {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

小结

从上面的几个例子我们可以看出，它们都用了flex布局。

垂直居中需要设置align-items: center;；

水平居中需要设置justify-content: center;。

工程放在： https://github.com/AnRFDev/tutorial-miniprogram

更多阅读

小程序开发记录

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-02-03，如有侵权请联系 cloudcommunity@tencent.com 删除

小程序

android

微信

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

小程序

android

微信

登录后参与评论

0 条评论

热度