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

最新推荐文章于 2024-01-25 20:58:43 发布

houruoyu3

最新推荐文章于 2024-01-25 20:58:43 发布

阅读量1.1w

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/houruoyu3/article/details/86764393

本文介绍了两种实现小程序中文字水平垂直居中的方法：一是利用line-height和text-align属性，二是采用flex布局。前者通过设置行高和文本对齐方式达到目的，后者则使用display:flex配合align-items和justify-content属性实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于小程序文字水平居中有两个方法

一、用line-height和text-align

wxml:

<view class='aa'>
   <text class='bb'>水平垂直居中</text>
</view>

wxss:

.aa{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.bb{
  width: 100%;
  height: 40px;
  line-height: 40px;    
  text-align: center;
  background: red;
  font-size: 14px;

}

出来的最终效果

line-height中的文本可以垂直居中，text-align设置为center可以水平居中

二、用flex布局解决问题

wxml:

<view class='aa'>
   <text class='bb'>水平垂直居中</text>
</view>

wxss:

.aa{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.bb{
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: red;
  font-size: 14px;

}

出来的最终效果

display设为flex后，align-items: center表示侧轴（纵轴）垂直， justify-content: center表示主轴（横轴）垂直