解决微信小程序button字体问题，字体换行，line-height设置无效

超时爆栈两开花

已于 2024-09-15 15:15:35 修改

阅读量196

点赞数 3

文章标签：微信小程序 css

于 2024-09-15 15:14:45 首次发布

本文链接：https://blog.csdn.net/qq_43488381/article/details/142282580

版权

微信小程序的button组件自带了一些样式，但这些样式可能并不是我们想要的，因此我们可以通过改变button的样式来得到我们想要的效果。button按钮内的字体对我来说太大了，我想把它改小一点，为此我设置font-size值为23rpx，并且想让字体在按钮内垂直水平居中，因此我设置了line-height、text-align、vertical-align属性

.btnSearch {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 23rpx;
  text-align: center;
  vertical-align: middle;
  background-color: pink;
}

得到按钮效果如图

在这里插入图片描述
显然，按钮中的文字并没有垂直居中，而且当我拉低按钮宽度时，明明按钮中是可以放下两个字的，但是它换行了。

这里其实就很明显了，原生button里面设置了padding值，我们只需要在css中将padding设置为0就好了

.btnSearch {
  flex: 1;
  height: 80rpx;
  padding: 0;
  line-height: 80rpx;
  font-size: 23rpx;
  text-align: center;
  vertical-align: middle;
  background-color: pink;
}