在中心垂直对齐项目 - Sencha Panel

Posted 2023-02-25

【中文标题】在中心垂直对齐项目 - Sencha Panel

【英文标题】：Align items vertically in a center - Sencha Panel

【发布时间】：2013-11-22 07:09:25

【问题描述】：

我正在尝试将项目的屏幕中间对齐为 label，但它是水平对齐而不是垂直对齐。

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

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

【参考方案1】：

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

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

【讨论】：

控制容器的子项如何打包在一起。就像center 一样，让子项在容器的中间宽度处打包在一起。

这不适用于我的面板。我有一个标签和一个按钮作为项目

【参考方案2】：

我想对于 HBox 布局最好使用“对齐：中间”配置。 试试这个：

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