解决flexalign-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>
text align center 这时候可能显⽰就不正常的,带数字的可能会偏上⼀点,解决的办法我到了两个:
1.,如果这个只是展⽰⼀部分信息,控制在⼀⾏之内显⽰,那么可以给这个view设置⾼度⾏⾼,这样他们就能垂直居中显⽰了。
2. 如果需要显⽰不⽌⼀⾏的话,那就只能把他们都放在同⼀个text或者view⾥⾯,这样他们也能垂直居中显⽰。这样的缺点就是不好通过css控制每个内容之间的距离。结构如下:
<view>
<text>内容22 我是对不齐的 555 内容三</text>
</view>
(ps:应该还有很多⽅法解决,初学flex的我就实践出这两种⽅法啦,希望能帮助到⼀些踩坑的童鞋)
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论