uni-app uni-ui组件库中uni-forms-item的label与uni-data-checkbox不对齐问题

uni-app uni-ui组件库中uni-forms-item的label与uni-data-checkbox不对齐问题

产品分类：uniapp/H5

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：windows10

HBuilderX类型：正式

HBuilderX版本号：3.4.7

浏览器平台：Chrome

浏览器版本：102.0

示例代码：

<uni-forms-item name="gender" label="性别" labelAlign="center">  
    <uni-data-checkbox :multiple="false" v-model="formData.gender" selectedColor="red" selectedTextColor="red" :localdata="formData.genderRange" mode="button" ></uni-data-checkbox>  
</uni-forms-item>

操作步骤：

<template>
<view>  
    <view class="avatar flex align-center justify-center">  
        <uni-file-picker v-model="imageValue" limit="1" mode="grid" fileMediatype="image"  
            :imageStyles="imageStyles">  
            <view class="avatar-seat flex align-center justify-center">头像</view>  
        </uni-file-picker>  
    </view>  
    <view >  
        <uni-forms :modelValue="formData" ref="form" :rules="rules">  
            <uni-forms-item name="name">  
                <uni-easyinput :inputBorder="false" type="text" v-model="formData.name" placeholder="请输入注册用户名" class="py-1 input-bg-color"></uni-easyinput>  
            </uni-forms-item>  
            <uni-forms-item name="password">  
                <uni-easyinput type="password" :inputBorder="false" v-model="formData.password" placeholder="请输入注册密码" class="py-1 input-bg-color"></uni-easyinput>  
            </uni-forms-item>  

            <uni-forms-item name="gender" label="性别" labelAlign="center">  
                <uni-data-checkbox :multiple="false" v-model="formData.gender" selectedColor="red" selectedTextColor="red" :localdata="formData.genderRange" mode="button" ></uni-data-checkbox>  
            </uni-forms-item>  

            <button class="submit" @tap="submit">注册</button>  
        </uni-forms>  
    </view>  
</view> 
</template>

<script>
export default {
data() {
return {
imageValue: [],
imageStyles: {
height: 120,
width: 120,
border: {
width: '2rpx',
style: 'solid',
radius: '20rpx',
color: "#a5a5a5"
}
},
formData: {
name: '',
password: '',
gender:0,
genderRange:[
{"value":0,"text":"未知"},
{"value":1,"text":"男"},
{"value":2,"text":"女"},
]
},
rules: {
name: {
rules: [{
required: true,
errorMessage: '请输入注册用户名'
}, {
minLength: 3,
maxLength: 30,
errorMessage: '用户名长度在 {minLength} 到 {maxLength} 个字符',
}]
},
password: {
rules: [{
required: true,
errorMessage: '请输入注册密码'
}, {
minLength: 3,
maxLength: 30,
errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
}]
}
}
}
},
methods: {
async submit(){
try{
const res=await this.$refs.form.validate();
console.log(res);
}catch(e){  
console.log('表单错误：',e);  
}  
}
}
}
</script>

<style scoped>
.avatar {
height: 30vh;
}
.avatar-seat {  
background-color: var(--avatar-default-color);  
width: 100%;  
height: 100%;  
}
.submit{
width: 96vw;  
height: 6vh;  
text-align: center;  
}
</style>