将radiofield自动收报机调整到中心位置

Question

所以这是我的无线电领域

所有图标都已居中，但收音机代码不是......我试图在检查器中修复此问题，如下面的代码所示

.x-field-radio .x-field-mask::before {
content: '';
position: absolute;
width: 26px;
height: 26px;
top: 11px;
left: auto;
right: 11px;
background-color: #dddddd;
-webkit-border-radius: 26px;
-moz-border-radius: 26px;
-ms-border-radius: 26px;
-o-border-radius: 26px;
border-radius: 26px;
}

.x-field-radio .x-field-mask::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
top: 16px;
left: auto;
right: 16px;
background-color: #d0d0d0;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
border-radius: 16px;
}

我将之前的内容更改为：左侧为35％，之后为：左侧为41％，使其看起来居中。

然而，这个解决方案只是暂时的，因为当我试图调整检查员大小以查看检查员大小对自动收报机的影响时，自动收报机完全偏离中心。

所以我想知道是否有任何其他可能的解决方案，无论屏幕大小如何，都将无线电自动收报机置于中心位置。我查看了Sencha Touch文档，但找不到任何可以解决我问题的文档。

编辑：包括以下代码的视图（我将图标更改为文本），如果有人可以帮助我在jsfiddle上试试这个..

Ext.define('view.view.Main', {
    extend: 'Ext.form.Panel',
    xtype: 'radiotest',

    requires: [
        'Ext.form.*',
        'Ext.field.*',
        'Ext.Button',
        'Ext.Toolbar',
        'Ext.TitleBar'
    ],

    config: {

        defaults: {
            required: true
        },

        items: [
            {
               xtype: 'container',
               id: 'radioPanel',
               items: [
                    {
                        xtype: 'fieldset',
                        layout: 'hbox',
                        title: 'Put label in here',
                        defaults: { 
                            xtype: 'radiofield',
                            labelAlign: 'top',
                            width: '20%',
                        },
                        items: [
                            { name : 'name1', label: '<p style="text-align:center">Icon1</p>', value: '1' },
                            { name : 'name2', label: '<p style="text-align:center">Icon2</p>', value: '2' },
                            { name : 'name3', label: '<p style="text-align:center">Icon3</p>', value: '3' },
                            { name : 'name4', label: '<p style="text-align:center">Icon4</p>', value: '4' },
                            { name : 'name5', label: '<p style="text-align:center">Icon5</p>', value: '5' }
                        ]
                    }
               ]
            },

        ]
    },

});