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

作者：weixin_40725706 | 2024-04-21 00:19:26

踩

微信小程序文字垂直居中

记录一下CSS设置文字水平垂直居中。

1、代码说明

对于直接在标签里面的文字，使用flex布局控制其中的文字水平和垂直居中

1.1、Html

<!-- pages/test/test.wxml -->
<view class='myText'>水平、垂直居中</view>
1
2

1.2、CSS

/* pages/test/test.wxss */
.myText{
  /* 用弹性盒子设置居中 */
  display: flex;
  align-items: center;/* 垂直居中 */
  justify-content: center;/* 水平居中 */

  /* 为了看效果，设置背景色和尺寸 */
  background-color: green;
  width: 500rpx;
  height: 500rpx;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13

2、效果

水平垂直居中

点个赞，一起加油啊！！！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/460115?site

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

目录

1、代码说明

1.1、Html

1.2、CSS

2、效果