css - EXTJS - float 2 个面板并将它们居中

Question

我被一些我想象中的事情困住了:)

将两个面板并排 float 并使它们居中。我得到的最接近的是将面板居中但彼此重叠。

像这样:

         _
        |_|
         _
        |_|

我想得到

         _   _
        |_| |_|

这是我目前的文件

Ext.define("App.view.MyWindow", {
extend:'Ext.panel.Panel',
alias:'widget.mywindow',
requires:[
      //this is just a simply panel with html:'abcde"
         'App.view.Portal1'

      ],
items:[{
    xtype:'portal1',
    height:400,
    width:400,
    style:{
        margin: '0 auto',
    }
},{
    xtype:'portal1',
    height:400,
    width:400,
    style:{
        margin: '0 auto',
    }
}]
});

有什么想法吗？欢迎大家:) ...提前致谢

更新:我最接近“解决方案”的是以下内容:(但是它需要设置宽度)

Ext.define("App.view.MyWindow", {
    extend:'Ext.panel.Panel',
    alias:'widget.mywindow',
    requires:[
             //this is just a simply panel with html:'abcde" with width & height 400
             'App.view.Portal1'

          ],
          layout:'fit',
    items:[{
        layout:{
            type:'vbox',
            align:'center'
        },
        items:[{
            layout:{
                type:'hbox',
            },
            //Set width :(
            width:800,
            items:[{
                xtype:'portal1',
            },{
                xtype:'portal1',
            }]
        }]

    }]
});

解决方案

感谢那些发表评论的人。这是一个可行的解决方案。不要在包装器面板上使用 layout:fit

Ext.define("App.view.MyWindow", {
    extend:'Ext.panel.Panel',
    alias:'widget.mywindow',
    requires:[
             //this is just a simply panel with html:'abcde" with width & height 400
             'App.view.Portal1'

          ],
    style:{
        textAlign:'center'
    },
    items:[{
        xtype:'portal1',
        style:{
            display:'inline-block'
        }
    },{
        xtype:'portal1',
        style:{
            display:'inline-block'
        }
    }]
});

Answer 1

只有 CSS 的解决方案，因为我不知道 extjs:

为每个面板提供适当的水平边距，这样它们就不会排列在一起。将它们的宽度和高度设置为正常。然后在面板上也设置 display: inline。最后，将包含元素设置为使用 text-align: center。为此，您可能需要引入新的容器元素。