欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-14 11:25:39
...

1、对于直接在标签里面的文字

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

2、使用flex布局控制其中的文字水平和垂直居中

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

  /* 为了看效果,设置背景色和尺寸 */
  background-color: green;
  width: 500rpx;
  height: 500rpx;
}
}

3、效果
微信小程序-文字水平垂直居中

相关标签: 微信小程序