因为最近再做小程序,需要用到flex布局,因为写惯了web项目,初次学习确实感弹性布局的强大(关键是不用再管可恶的ie了)。

但是也遇到了align-items:center无法居中的问题,想了很久终于找到了解决办法。

解决方法:

  1.确定好自己的主轴方向是不是row,如果是column,那么恭喜你,align-items:center是不起效果的,这时候你可以试试justify-content:center,是不是居中了呢?(ps:这个问题我花了半天时间才弄明白,之前一直以为align-items只是控制上下居中的,没有注意主轴的方向)

  2.在带有数字的view或者text标签中不能上下居中,布局如下:

  情况1:都是中文的情况下,给view加上align-items:center 其实是能居中的。

  

<view>
<text> 内容一 </text>
<text> 内容二 </text>
<text> 内容三 </text>
</view>

  情况2: 只要带有数字的情况下,view加上align-items:center部分手机上看着是不居中的(我的手机看着不是垂直居中的,别人的手机看着是垂直居中的,可能是我手机太差了,求老铁支援支援,没毛病!)

<view>
<text> 内容22 </text>
<text> 我是对不齐的 555 </text>
<text> 内容三 </text>
</view>

  这时候可能显示就不正常的,带数字的可能会偏上一点,解决的办法我找到了两个:

  1.,如果这个只是展示一部分信息,控制在一行之内显示,那么可以给这个view设置高度行高,这样他们就能垂直居中显示了。

  2.   如果需要显示不止一行的话,那就只能把他们都放在同一个text或者view里面,这样他们也能垂直居中显示。这样的缺点就是不好通过css控制每个内容之间的距离。结构如下:

<view>
<text> 内容22 我是对不齐的 555 内容三 </text>
</view>

  (ps:应该还有很多方法解决,初学flex的我就实践出这两种方法啦,希望能帮助到一些踩坑的童鞋)

  

解决 flex align-items:center 无法居中(微信小程序)的更多相关文章

  1. 微信小程序 View:flex 布局

    微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...

  2. 微信小程序常见问题1----适合新手

    1.本地调试 1)微信小程序填坑之路之使用localhost在本地测试 2)本地代理创建:微信小程序之使用本地接口开发 2.页面跳转 1)页面跳转 2)小程序之间跳转 3.小程序尺寸 1)微信小程序尺 ...

  3. 微信小程序中如何实现分页下拉加载?(附源码)

    转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...

  4. SAP UI5和微信小程序对比之我见

    今天继续由SAP成都研究院著名的菜园子小哥Wang Cong,给大家分享他作为一个SAP前端人员是如何看待SAP UI5和微信小程序的异同点的. 关于Wang Cong种菜的手艺,大家请移步到他以前的 ...

  5. 微信小程序基础之开源项目库汇总

    awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. (链接:ht ...

  6. 微信小程序--地图上添加图片

    如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...

  7. 微信小程序< 3 > ~ 微信小程序开源项目合集

    简介 移动开发者想学习微信小程序需要学习一点HTML ,CSS和JS才能够比较快速的上手,参考自己学习Android学习过程,阅读源码是一个很好的方式,所以才收集了一些WeApp的开源项目. awes ...

  8. 原创:新手布局福音!微信小程序使用flex的一些基础样式属性

    来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi   Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...

  9. 微信小程序开发:Flex布局

    微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...

随机推荐

  1. EEPlat的元模型体系

    EEPlat的元模型体系是元数据驱动的必要条件之中的一个.仅仅有通过元模型可以完好的描写叙述一个软件系统.才可以完整的定义该软件系统的元数据,也才干真正实现软件系统的元数据驱动式开发.也就意味着一个软 ...

  2. Java并发编程(八)不变性

    提到不变性我首先想到的就是String这个类了. 之前学习了很多原子性以及可见性的问题:失效数据,丢失更新操作或者某个对象的状态不一致,都与多线程试图访问同一个可变的相关. 如果对象的状态不会发生改变 ...

  3. 配置LANMP环境(3)-- 安装anmp前准备与实用软件安装

    一.安装配置vim 1.安装 yum -y install vim* 2.创建文件夹 mkdir -p /etc/vim/ 3.配置 vim ~/.vimrc  "插入模式时 光标的上下左右 ...

  4. 22lvs 健康节点检查

    [root@lb03 scripts]# cat lvm_health_check.sh #!/bin/bash web_ip=( 10.0.0.17 10.0.0.18 ) # 检查恢复就添加节点 ...

  5. 以css为例谈设计模式

    什么是设计模式? 曾有人调侃,设计模式是工程师用于跟别人显摆的,显得高大上:也曾有人这么说,不是设计模式没用,是你还没有到能懂它,会用它的时候. 先来看一下比较官方的解释:"设计模式(Des ...

  6. flask/sqlalchemy - OperationalError: (sqlite3.OperationalError) no such table

    狗书第五章 记得要先创建表 执行 db.create_all()语句来创建表 https://segmentfault.com/q/1010000005794140

  7. consul eureka区别(来自Consul官网)

    consul 与 eureka Eureka是一个服务发现工具.该体系结构主要是客户端/服务器,每个数据中心有一组Eureka服务器,通常每个可用区域一个.通常Eureka的客户使用嵌入式SDK来注册 ...

  8. Spring MVC密码处理

    以下示例显示如何在使用Spring Web MVC框架的表单中使用密码.首先使用Eclipse IDE来创建一个WEB工程,并按照以下步骤使用Spring Web Framework开发基于动态表单的 ...

  9. android模拟器怎么直接安装apk

    方法一:进入adb的tools目录,下面有adb.exe如图, 在cmd下进入tools目录,然后输入adb install apk路径,就行了 方法二:直接写一个批处理文件 运行就行了.

  10. jvm(13)-线程安全与锁优化

    [0]README 0.1)本文部分文字转自“深入理解jvm”, 旨在学习 线程安全与锁优化 的基础知识: 0.2)本文知识对于理解 java并发编程非常有用,个人觉得,所以我总结的很详细: [1]概 ...