我们先把原始代码贴上
index.wxml
<!--pages/index.wxml-->
<view>
<text>AI花草识别</text>
</view>
/* pages/test.wxss 默认为空 */
显示效果如下:
可以看到,文字是默认居左显示的。
![fabe61ca869b2eb8141260f76bca2b5f.png](https://i-blog.csdnimg.cn/blog_migrate/1bdbc927e008ef4264f00cfb080afda7.jpeg)
下面代码可以让文字居中,但是会有一个问题出现,文字没有上下居中。
<!--pages/index.wxml-->
<view class='main'>
<text>AI花草识别</text>
</view>
/* pages/index.wxss */
.main{
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
text-align: center;
}
![046c22a883400bc4cae006bceeef665f.png](https://i-blog.csdnimg.cn/blog_migrate/87270815ca3f337313ccf59fc0e7a1af.jpeg)
我们通过调试功能看一下
![d73c6776df0c23376c59404094e36403.png](https://i-blog.csdnimg.cn/blog_migrate/0e1c0eac8b542347bcc7a0abd69c95e7.jpeg)
image.png
我们可以看到,整个页面的高度才25,所以,我们尝试把整个页面的高度调成100%的高,代码如下:
/*比之前新增了一个page标签*/
page{
height: 100%;
}
.main{
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
text-align: center;
}
看一下效果:
![d77a46f09bacfbd343ff15ec26d6cf2e.png](https://i-blog.csdnimg.cn/blog_migrate/816ccfa6ad73e02d2bac63c0db6fd778.jpeg)
可以看到真个页面的高度填充了整个屏幕,子标签view的高度也达到了100%,文字也实现了上下和左右居中。
所以当你要实现标签上下左右居中的时候,看到没有效果,一定要看一下父标签的高度和宽度情况。
让我们来简单的分析一下wxss(css)代码:
display: flex;
justify-content:center
上面这行代码,可以使字标签靠上居中,但是需要配合display: flex;否则无效。
我从网上找了个图,大家可以直观的看下。
![8d62d528970da833ee5f29e66c8ed630.png](https://i-blog.csdnimg.cn/blog_migrate/9529f06c25bf86c1a5685e5d4cb26079.jpeg)
align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式,也就是子标签的上下对齐方式,同样需要配合display: flex;
做了个简单的例子给大家看:
![53411bb6d93abf3267003232f1996ba9.png](https://i-blog.csdnimg.cn/blog_migrate/f3be50b6febd95f5d642dec4512f42b3.jpeg)
所以搭配上面两行代码,就可以实现字标签的上下左右居中,
最后,大家一定不要忘记display: flex;
如有什么不对的地方,还请大家指正交流。
分享一下我做的小项目,基于AI图片识别的一个小工具,实现花草识别。大家有什么问题,可以留言共同交流。
![0924ecb375140246c01b29c0eac3dca4.png](https://i-blog.csdnimg.cn/blog_migrate/a2021476f52513c6de3ea03f6210534c.jpeg)