小程序组件居中问题

旧城等待， 2022-06-09 03:49 455阅读 0赞

在小程序中实现居中的功能是经常用到的，比如在text组件中让文本内容在竖直（水平）方向自动居中、让图片显示在页面的中央等。使用弹性布局flex可以轻松搞定。

对容器的display设为flex，如display:flex

利用**水平方向属性justify-content**和**竖直方向属性align-items实现水平居中、竖直居中、在中心显示。**

.wxml代码如下:

<view>
       <text class="adContent">测试用小玩意儿</text>
    </view>

一：.wxss代码如下：

.view{
        height:100%;
        width:100%;
    }
    
    .adContent{
        width:100%;
        height:100%;
        display:flex;
        align-items:center
    }

**效果：实现竖直居中**

![Center][]

二、将align-items改成justify-content：

.adContent{
        width:100%;
        height:100%;
        display:flex;
        justify-content:center
    }

效果：水平居中

![Center 1][]

三、将align-items和justify-content一起使用可以将组件放在中心点：

.adContent{
        width:100%;
        height:100%;
        display:flex;
        justify-content:center；
        align-items:center;
    }

实现效果：使组件处于中心位置：

![Center 2][]

其他一些属性的用法：

flex-wrap(规定子元素溢出处理)：nowrap(不换行)    wrap(换行)     wrap-reverse(逆序换行)

[Center]: /images/20220609/8b8f4529b11a4d6a8b3ff6030c4ebbab.png
[Center 1]: /images/20220609/b347c895f1274cca9e70ca47b95b69bc.png
[Center 2]: /images/20220609/7ef09c99ca9d4808a4d06e6b81697008.png

发表评论取消回复

表情：

评论列表（有 0 条评论，455人围观）

还没有评论，来说两句吧...

相关阅读

相关【小程序】组件

目录 1. 小程序中组件的分类 2. 常用的视图容器类组件 3. view 组件的基本使用 4. scroll-view 组件的基本使用 5. swiper 和 sw

小咪咪/ 2024年03月30日 11:11/ 0 赞/ 92 阅读

相关微信小程序水平居中和垂直居中

配合使用当 display: flex 配合 justify-content: center 使用时可以让view水平居中水平居中 display:

「爱情、让人受尽委屈。」/ 2023年06月03日 02:53/ 0 赞/ 11 阅读

相关 Taro 小程序 Canvas文字居中

重点就是textAlign必须写在fillText之前, 文字的x轴必须设置为你的canvas宽度的一半 // 绘制文本 ctx.font = `norm

拼搏现实的明天。/ 2023年03月06日 05:04/ 0 赞/ 10 阅读

相关微信小程序关于view的居中问题

.viewClass{ display: flex; justify-content: center; /水平/ align-i

阳光穿透心脏的1/2处/ 2022年12月31日 01:28/ 0 赞/ 393 阅读

相关小程序组件居中问题

在小程序中实现居中的功能是经常用到的，比如在text组件中让文本内容在竖直（水平）方向自动居中、让图片显示在页面的中央等。使用弹性布局flex可以轻松搞定。对容器

旧城等待，/ 2022年06月09日 03:49/ 0 赞/ 456 阅读

相关小程序垂直居中

<view class='ercode' style='height:{ {viewHeg}}px'> <view> <ima

拼搏现实的明天。/ 2022年04月04日 11:49/ 0 赞/ 225 阅读

相关小程序view水平垂直居中

水平垂直居中 //wxss .main \{ display: flex; align-items: center; justify-content: cen

川长思鸟来/ 2022年03月02日 08:57/ 0 赞/ 329 阅读

相关小程序的垂直水平居中

问题描述要实现水平/垂直居中，css设置 display: flex; justify-content: center; //水平居中 ali

小灰灰/ 2022年01月23日 05:21/ 0 赞/ 271 阅读

相关小程序组件--视图容器组件

（1）view视图容器 ①hover-class 这个属性后面接string，string是一个类名，在这个组件被点击的时候，加上string这个类，相当于PC端

小鱼儿/ 2021年11月27日 03:36/ 0 赞/ 422 阅读

相关小程序组件--基础内容组件

（1）icon图标组件组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px) ![在这里插入图片描述][20190723193746289.png]

水深无声/ 2021年11月26日 08:06/ 0 赞/ 405 阅读