<template>
<view>
<view class="item"></view>
</view>
</template>
<script>
</script>
<style lang="less">
.item{
position: relative;
top: 300rpx;
border:2rpx solid #c8c8c8;
font-size: 10px;
color:#fa3ef5;
border:2rpx solid #eb92f0;
width: 100rpx;
height: 30rpx;
display: flex;
justify-content: center;
align-items: center;
}
</style>
H***@163.com
- 发布：2023-08-25 12:12
- 更新：2023-08-25 12:20
- 阅读：975
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： Ventura13.5.1
HBuilderX类型： 正式
HBuilderX版本号： 3.8.12
第三方开发者工具版本号： 1.06.2307260
基础库版本号： 2.27.1
项目创建方式： HBuilderX
示例代码：
操作步骤：
打开页面代码，查看标签文本是否垂直居中
打开页面代码，查看标签文本是否垂直居中
预期结果：
文本垂直居中
文本垂直居中
实际结果：
iphone上文本偏上，未能垂直居中
iphone上文本偏上，未能垂直居中
bug描述：
按钮样式文本的垂直居中在不同机型上无法居中，尝试了
vertical-align: middle;
flex布局
display: flex;
justify-content: center;
align-items: center;
height: 30rpx;
line-height: 30rpx;
box-sizing: border-box;
等各种方式在苹果手机上均不能垂直居中，表现为文本偏上，上面间距小于下面间距，android和模拟器显示正常
爱豆豆 - 办法总比困难多
最简单 且没有兼容问题的方法
使用padding-top 和 padding-bottom 来垂直居中
<view style="padding: 10rpx 32rpx;">
内容
</view>
爱豆豆
我基本文字垂直居中都用这种写法 不用line-height
2023-08-25 12:21
H***@163.com (作者)
回复 爱豆豆: 这种方式也是用uniapp的微信小程序项目用padding好像也不能实现水平居中
2023-08-25 13:02
爱豆豆
回复 H***@163.com: 你把你做中的样式发出来看看
2023-08-25 13:46