uniapp button字体没有垂直居中

uniapp在某些场景下，它的button字体没有垂直居中：

应该看的出来，上面比下面宽不少。造成这个现象的原因是我给它的样式设置了height：80%。因为默认样式只提供了default和mini这两个选项，他们分别代表的字体大小是18px和13px。

因为我是不想按钮太挨着我的上下两条边，所以设置了高度。

解决办法1：

放弃设置高度，改为设置字体大小，也能改变按钮的高度。这个方法应该更符合规范。

解决办法2：
方法1可能大家都知道，这里主要想讲一下另一个方案，虽然在这里不一定适合：

造成这个现象其实是因为button字体的默认大小是18px。而我们页面body的默认字体是16px（这个可能不同平台不一定）。他们不一致导致的。我觉得可以理解为，button样式依然不是很理想，在这种场景下不能自动垂直居中。

所以，这里的方法是，让button样式的字体设置失效，跟随body的字体：

font-size: unset;

只需要在样式这样设置，button样式的font-size就会失效，从而跟随body的字体大小，也能恢复字体的垂直居中。

当然，在这个问题，方法1更合适。只不过，这个unset不仅仅只在font-size有效，其他场合也能用。

uniapp button字体没有垂直居中相关推荐

uniapp引入字体文件
将下载好的字体放进项目中 static里面的 ttf文件大于40kb需要转成base64格式转换完之后把代码复制下来新创建一个css 然后copy进去 @font-face {font-famil ...
uni-app 图标字体引用
不一样的配方,一样的味道 1.先说官网上的使用方法: 不支持本地路径,替换方式:使用本地图片或将字体图标转换为base64格式字符串. 网络路径必须加协议头 https. 从 http://www.i ...
uniapp使用字体图标
1.在阿里图标库下载需要的字体图标,选择好图标后点下载代码 iconfont-阿里巴巴矢量图标库 2.将下载的压缩包里面的ttf文件拷贝到uniapp项目的static文件夹 3.如果是要用到app的 ...
解决ie9字体不垂直居中方法
1.将中文字体汉字转换为Unicode编码 "黑体"对应Unicode编码为"\9ED1\4F53" "宋体"对应Unicode编码为&qu ...
十步搞定uni-app使用字体图标
uni-app中使用字体图标图标的下载首先去阿里图标库选择要用的图标,并且打包下载下来,步骤如下 1. 2. 3. 4. 5. 6. 本地文件选取 7. 粘贴到uni-app项目下的static静 ...
uniapp引入字体图标库
步骤 1.首先在项目文件夹的src目录下新建一个styles文件夹,将字体图标文件放到其中iconfont.wxss 2.在App.vue中的标签中全局引入字体图标文件 ``` 3.这样就完成了字体图 ...
uniapp修改字体
1.下载字体 2.将字体导入 3.在style中使用@font-face注册字体 @font-face{font-family:"bulingstyle";src: url('.. ...
uniapp 文本字体样式总结
常用字体样式记录(个人学习记录): 1.字体大小font-size:26rpx;2.文字加线1)下划线:text-decoration:underline2)删除线:text-decoration:l ...
Button字体大写
Button字体大写 5.0以后button 的默认属性 textAllCaps 被改为true 了 ,此时Button上的字母会自动大写. 在xml里面设置android:textAllCaps= ...
android app字体库,Uni-app使用字体库，在浏览器正常，但是在Android手机，调不到字体库，如何修改呢？...
使用字体库,在浏览器正常,但是在Android手机,调不到字体库,如何修改呢? 字体库引用代码 @import './common/uni.css'; @font-face { font-family ...

uniapp button字体没有垂直居中

uniapp button字体没有垂直居中相关推荐

最新文章

热门文章