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

孙帅丨SUNSHUAI

已于 2023-04-15 14:07:30 修改

阅读量6.8k

点赞数 6

分类专栏：微信小程序文章标签：微信小程序 css 小程序

于 2020-06-29 15:59:27 首次发布

尊重原创，打造和谐的学习环境！

本文链接：https://blog.csdn.net/qq_30595441/article/details/107021713

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

1、代码说明

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

1.1、Html

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

1.2、CSS

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

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