因为最近再做小程序,需要用到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. Netbeans取消CTRL+\才能代码提示的方法

    更好的方法: ------------------------------------------------------------ 边打字边按CTRL+\进行代码提示的方法我TM也是醉了 简而言之 ...

  2. iOS valueForKeyPath快速计算求和、平均值、最大、最小

    iOS中开始取出数组中最大值,最小值除了使用排序的方式,还可以使用valueForKeyPath的方式直接取出 array = @[@(10),@(100),@(20),@(97)]; CGFloat ...

  3. Python 2.7 中使用 Print 方法

    print ("test",file=name)类似的方法在python 2中需要先引入 __future__才可使用 import __futhure__ import prin ...

  4. CI框架 简介

    CI工作流程:        所有的入口都从根目录下的index.php进入,确定应用所在目录后,加载 codeigniter/CodeIgniter.php 文件,该文件会顺序加载以下文件执行整个流 ...

  5. 整合Thinkphp数据库基本操作CURD,界面datagrid采用EasyUi的Demo

     1 <?php  2     class CurdAction extends Action{  3         public function del($id){  4          ...

  6. mac与phy怎样实现网络自适应

    这两天改动网卡驱动以实现10/100/1000M自适应,因此研究了下phy芯片和emac驱动怎样兼容10/100/1000M网络环境,记录在此. 网络中设备端数据链路层由mac芯片和phy芯片组成.p ...

  7. UML Rose2003完美破解攻略

    Rational Rose 2003 软件project画图软件 ,当然还不止画图,对于那些不想用英文版Rational Rose2003的同志们.这个Rational Rose2003 版本号已经汉 ...

  8. js array filter pop push shift unshift方法

    JavaScript Array filter() 方法  JavaScript Array 对象 实例 返回数组 ages 中所有元素都大于 18 的元素: var ages = [32, 33,  ...

  9. JavaScript核心(晋级高手必读篇)

    本文是对“ECMA-262-3 in detail”系列学习内容的概述与总结.如果你对ES3系列文章感兴趣,本文每一节内容均包含相应ES3系列章节的链接,以供阅读与获取更深入的解释. 本文预期读者:有 ...

  10. 【BZOJ5056】OI游戏 最短路+有向图生成树计数

    [BZOJ5056]OI游戏 Description 小Van的CP最喜欢玩与OI有关的游戏啦~小Van为了讨好她,于是冥思苦想,终于创造了一个新游戏. 下面是小Van的OI游戏规则: 给定一个无向连 ...