关于小程序文字水平居中有两个方法
一、用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表示主轴(横轴)垂直