小程序中align-items: center竖直方向居中失败解决办法

Posted Z_hongli

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序中align-items: center竖直方向居中失败解决办法相关的知识,希望对你有一定的参考价值。

垂直居中失败现象

可以看到我在CSS中设置了水平和垂直居中,但是显示出来并没有效果

CSS中代码

.Nav_text{
  display: flex;
  align-items: center;
  justify-content: center;
}

原因/解决办法

原因其实很简单,因为我这个文本是单独设置的,但是他没有设置高度,自然也就没法居中,现在我把它的高度大小设置同它的父容器一样高就行了

CSS

.Nav_text{
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

这样就能够解决完美居中的问题了!

以上是关于小程序中align-items: center竖直方向居中失败解决办法的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序 view中的image水平垂直居中

微信小程序文字水平垂直居中对齐问题

微信小程序的view标签中text如何居中?

微信小程序 view文字水平垂直居中

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

微信小程序:图片与文字无法居中 最后解决的方法是——