小程序view容器中文字上下居中、左右居中显示

最新推荐文章于 2024-08-12 12:46:53 发布

airX嵌入式（微信公众号同名）

最新推荐文章于 2024-08-12 12:46:53 发布

阅读量4.2w

点赞数 16

分类专栏：小程序扩展文章标签： UI 微信小程序 wxss 居中 flex

本文链接：https://blog.csdn.net/qq_22520215/article/details/83031891

版权

小程序扩展专栏收录该内容

1 篇文章 0 订阅

订阅专栏

方法一、text-align、line-height

其中line-height的值必须等于容器的高度值。

.wxml

<view class='text_align' >水平居中</view>  
<view class='line_height' >垂直居中</view>
<view class='center' >水平居中||垂直居中</view>


.wxss

.text_align{
  width: 350rpx;
  height: 350rpx;
  background-color: gray;
  text-align: center;   /** 水平居中 **/
}

.line_height{
  width: 350rpx;
  height: 350rpx;
  background-color: orange;
  line-height: 350rpx;  /** 垂直居中 **/  
}

.center{
  width: 350rpx;
  height: 350rpx;
  background-color: brown;
  line-height: 350rpx;  /** 垂直居中 **/ 
  text-align: center;   /** 水平居中 **/ 
}

效果图如下：

方法二、display flexible box模型

.wxml

<view class='text_align' >水平居中</view>
<view class='line_height' >垂直居中</view>
<view class='center' >水平居中||垂直居中</view>

.wxss

.text_align{
  width: 350rpx;
  height: 350rpx;
  background-color: gray;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.line_height{
  width: 350rpx;
  height: 350rpx;
  background-color: orange;
  line-height: 350rpx;  /** 垂直居中 **/  
}
.center{
  width: 350rpx;
  height: 350rpx;
  background-color: brown;
  line-height: 350rpx;  /** 垂直居中 **/ 
  text-align: center;   /** 水平居中 **/ 
}

效果图：