900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 微信小程序将组件中的文字放置在正中间的方法

微信小程序将组件中的文字放置在正中间的方法

时间:2024-03-27 04:39:44

相关推荐

微信小程序将组件中的文字放置在正中间的方法

正常组件使用默认的属性时,只需要设置text-align属性为center即可,如下:

demo.wxml

<view class="test">测试</view>

demo.wxss

.test{background-color: aqua;text-align: center;}

效果图:

如果此时将view组件的高度加高(设置height属性为100rpx)会出现下面的情况,文字在水平方向上的正中心,而不在垂直方向的正中心。

解决方法如下,把文字单独放在一个text标签中,用view标签包裹,view标签设置为flex,通过设置align-items和justify-content属性实现居中效果。

demo.wxml

<view class="test"><text>测试</text></view>

demo.wxss

.test{background-color: aqua;height: 100rpx;display: flex;justify-content: center;align-items: center;}

效果图:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。