zoukankan      html  css  js  c++  java
  • 解决 flex align-items:center 无法居中(微信小程序)

    因为最近再做小程序,需要用到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的我就实践出这两种方法啦,希望能帮助到一些踩坑的童鞋)

      

  • 相关阅读:
    javascript中!=、!==、==、===操作符总结
    轮询、长轮询与Web Socket的前端实现
    C#中Enum用法小结
    浅谈Javascript 中几种克隆(clone)方式
    JS数组sort比较函数
    为Jquery类和Jquery对象扩展方法
    自定义滚动条mCustomScrollbar
    T-SQL 控制流语句
    sql case 用法总结
    Selenium2+python自动化19-单选框和复选框(radiobox、checkbox)【转载】
  • 原文地址:https://www.cnblogs.com/zzd0916/p/7218451.html
Copyright © 2011-2022 走看看