微信小程序给button设置宽高(wxss中设置button宽度不生效)并让文字居中

在开发微信小程序过程中,如果想给button按钮自定义宽的话,在wxss中设置是没有效果的,只设置高会有效果。

比如
wxml

<button class="btn">只喝怡宝</button>

wxss

.btn{
  margin-top: 30rpx;
  width: 400rpx;
  height: 200rpx;
}

效果就是这样的,只有高度生效

在这里插入图片描述

如果想要宽度也生效的话,就需要在button标签设置style属性

<button class="btn" style="width: 600rpx;height: 200rpx;">只喝怡宝</button>

效果如下:
在这里插入图片描述
可以发现设置之后文字没有垂直居中,想要文字垂直居中的话可以设置一下行高line-height就可以了()

<button class="btn" style="width: 600rpx;line-height: 200rpx;">只喝怡宝</button>

在这里插入图片描述

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值