radio 不能垂直居中，如何修改css

uniapp开发小程序时，使用radio-group,出现选框和选项虽然在一行内，但是不能居中，这个如何修改呢？代码如下

    <radio-group>
                    <label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in addressList" :key="index"  @click="chooseAddress(item)">
                        <div class="radio-icon">
                            <radio :value="item.id"  :checked="item.defaultAddress" />
                        div>
                        <div class="single-address-item">
                            <div class="address-item">{{item.clientArea}}{{item.clientAddress}}
                                
                                <div v-if="!item.flash&&item.addBounty" class="address-item-flash">(距默认地址{{item.kilometers}}公里，每公里追加赏金{{item.bountyNumber}}元)div>
                                <div v-if="item.flash" class="address-item-flash">(需要叫闪送)div>
                                <div v-if="!item.flash&&item.bounty!=null&&item.bounty!=''" class="address-item-flash">(赏金{{item.bounty}}元)div>
                            div>
                            
                            <div> {{item.clientName}} {{item.clientPhone}}div>
                        div>
                        <image src="../../static/image/edit.png" class="edit-image">image>
                        <div style="height: 20px;width: 100%;">div>
                    label>
                    
                    
                radio-group>

.radio-icon{
        margin-left: 10px;
        display: inline-flex;
        text-align: center;
        
    }
    .single-address-item{
            margin-left: 15px;
            display: inline-block;
            width: 70%;
    }
    .edit-image{
        display: inline-block;
        width: 20px;
        height: 20px;
    }

效果图如下：

如何让这个选框垂直居中呢？

调这里的样式uni-list-cell，垂直居中

单选框默认在最左边，你改的只是字的内容居中，改不了radio

省事一点的办法是覆盖样式使用margin，来控制上下距离
也可以用flex垂直居中

flex布局