关于⼩程序⽂字⽔平垂直居中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>
结果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。