小程序组件居中问题
来源:互联网 发布:art template.js 下载 编辑:程序博客网 时间:2024/05/18 00:00
在小程序中实现居中的功能是经常用到的,比如在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}
效果:实现竖直居中
二、将align-items改成justify-content:
.adContent{ width:100%; height:100%; display:flex; justify-content:center}
效果:水平居中
三、将align-items和justify-content一起使用可以将组件放在中心点:
.adContent{ width:100%; height:100%; display:flex; justify-content:center;
align-items:center;}
实现效果:使组件处于中心位置:
其他一些属性的用法:
flex-wrap(规定子元素溢出处理):nowrap(不换行) wrap(换行) wrap-reverse(逆序换行)
阅读全文
0 0
- 小程序组件居中问题
- Flex组件居中问题
- flex组件居中问题
- 小程序 组件
- 小程序组件实现
- 小程序 基础组件
- 小程序swiper组件做轮播图图片高度问题
- 小程序七:组件之表单组件
- 小程序基础组件与导航组件
- 组件居中
- 小程序十:媒体组件
- 小程序组件开发坑
- DOM 组件的小问题
- [转]小问题: windows组件调用失败,无法加载安装安装程序:Wbemupgd.dll
- 小程序中的小问题
- 小程序问题
- 小程序会话问题
- 小程序模态框问题
- 微型四轴飞行器(3)嵌入式软件设计
- Dos常用指令
- [读书笔记]第四章 旅馆在房间里为你准备擦鞋布的原因,是怕你用他们的白浴巾
- [空白] ZOJ2482
- 正式工作一个月
- 小程序组件居中问题
- 括号匹配问题
- Android 分享几个应用源码
- hdu 2553 N皇后问题
- Java jsp时间格式化
- 表单包含有中文参数值,乱码问题
- 第七章 与Web集成(二) ShiroFilter入口
- LeetCode 661 : Image Smoother(python)
- [读书笔记]第五章 她吃不下 也不让别人吃,一口咬下含在嘴里不吞下去