關於微信小程式文字水平垂直居中
阿新 • • 發佈:2019-01-04
1.用line-height的值和view的height值一樣
wxml:
<view class='container'>
這是個例子
</view>
wxss:.container{
border: 2rpx black solid;
width: 400rpx;
height: 200rpx;
text-align: center;
line-height: 200rpx;
}
效果:
2.用flex佈局
wxml:
<view class='container'> <text>這是個例子 </text> </view>
wxss:
.container{
border: 2rpx black solid;
width: 400rpx;
height: 200rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
效果和第一種結果一樣。
(注意text標籤後如果換行再寫文字,那顯示的結果也會有空行)
比如我居中後這樣寫:
<view class='container'> <text> 這是個例子 </text> </view>
結果是:
這樣寫:
<view class='container'>
<text>
這是個例子
</text>
</view>
結果: