在中心垂直对齐项目 - Sencha面板

Question

我试图将项目的屏幕中间对齐一个label，但它是水平对齐而不是垂直对齐。

var panel = new Ext.Panel({
    layout:{
        type: 'vbox',
        align: 'center'
    },
    items:[
        {
            xtype: 'label',
            html: 'My Label'
        }
    ],
    fullscreen: true,
    flex: 1
});

我已移除flex，并设置了height，但它不起作用。请给我一些线索？

Answer 1

尝试在布局中使用pack: center，如下所示：

var panel = new Ext.Panel({
    layout: {
        type: 'hbox',
        align: 'center',
        pack: 'center'
    }, 
    items:[
        {
            xtype: 'label',
            html: 'My Label'
        }
    ]
});

Answer 2

对于HBox布局，我更喜欢使用'align：middle'配置。 试试这个：

var panel = new Ext.Panel({
    layout: {
        type: 'hbox',
        align: 'middle'
    }, 
    items:[{
        xtype:'label',
        html:'My Label'
    }]
});