专栏首页AnRFDev微信小程序 居中布局css

微信小程序 居中布局css

本文链接

居中放置元素是一个比较常见的需求。 可以水平居中,垂直居中。同时水平和垂直居中等等。 在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

更多阅读

小程序开发记录

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序布局

    开始我们的入门后,接下来就可以开始创建我们的第一个demo页面了。按照官网的步骤,在pages模块下新建我们自己的模块demo,添加好对应的文件,然后在app....

    用户2305175
  • 微信小程序flex布局

    https://www.cnblogs.com/sun8134/p/6395947.html

    似水的流年
  • 微信小程序-view元素Flex布局

    对于网页布局,推荐 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。可以参考完全教材,我推荐一个阮老师的,下面...

    叉叉敌
  • 微信小程序布局单位的使用

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。官方推荐微信小程序可以用iPhone6 作为视觉稿的标准。规定屏幕宽为750rpx。...

    用户2305175
  • 微信小程序一行文字水平居中

    特别声明:除特别标注,本站文章均为原创,本站文章原则上禁止转载,如确实要转载,请电联:wangyeuuu@qq.com,尊重他人劳动成果,谢过~

    可定
  • 微信小程序中实现瀑布流布局和无限加载

    瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感。

    一斤代码
  • WeUI框架

    WeUI是一套小程序的UI框架,所谓UI框架就是一套界面设计方案,有了组件,我们可以用它来拼接出一个内容丰富的小程序,而有了UI框架,我们就可以让我们的小程序变...

    达达前端
  • 微信小程序设置自定义头部居中

    明知山
  • 小程序怎么将视觉搞实现成ui

    这个真的是强烈建议,对于一个页面,首先应该大致的看一下可以划分为哪几个模块,通常的划分方式是,整体来看,是row排列,还是column排列的,那么,最擅长做这种...

    brzhang
  • 微信小程序----全局变量

    实例:我在公用文件夹src下的js文件夹中创建的三个保存全局变量的文件:base64.js、config.js、data.js

    Rattenking
  • 微信小程序开发详解《五》布局基础

    1:Flex布局 Flex布局如图所示 image.png 1.1 Flex容器属性 image.png 1.2 Flex容器内元素属性 image...

    极乐君
  • 快速学习-微信小程序开发(flex布局)

    https://www.w3.org/TR/css-flexbox-1/ https://www.w3.org/TR/css-align-3/

    cwl_java
  • 微信小程序文字水平居中对齐问题

    如果微信小程序开发刚入门,每一种居中方式都可以复制进去WXSS试一下,总有一款适合自己的。

    可定
  • 微信小程序|flexbox layout—快速实现基本布局

    flexbox layout——弹性盒子布局。弹性盒子可以快速的对小程序进行布局。一般传统的小程序布局方法对内容量少的页面而言很方便,但对页面比较复杂的来讲就很...

    算法与编程之美
  • 微信小程序----CSS 的空格处理

    Rattenking
  • 微信小程序的组件用法与传统HTML5标签的区别

    小程序刚开放公测,互联网圈内开始了各种解读和猜测。其中有观点认为小程序和HTML5有着紧密关联,甚至小程序就是基于HTML5开发。

    一墨编程学习
  • 微信小程序文字水平对齐各自居左居右

    在看了php中文网的微信小程序教程和结合某些开源小程序代码后,改出了下面代码,供大家参考。

    可定
  • 重构不完全教程集之一

    本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 “无上甚深微妙法,百千万劫难遭遇,我今见闻得受持,愿解如来真实义。” ——《...

    IMWeb前端团队
  • 重构不完全教程集之一

    “无上甚深微妙法,百千万劫难遭遇,我今见闻得受持,愿解如来真实义。” ——《开经偈》

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券