创建带有居中按钮的 2x2 按钮网格？

Question

我有一个 2x2 的按钮网格。现在我想将按钮缩小到 200x200，将每个放在一个容器中作为空间占位符，然后居中 每个按钮在其各自的容器中。

在我的形象中，我只有 缩小顶部的两个按钮，以便您可以看到页面上的间距。 我怎样才能从第一张图片转到第二张图片，这是 Photoshop的？

目标：（实际上，所有 4 个居中的按钮都是目标）

文件：app.js

分机应用程序（{ 启动：函数（）{ var view = Ext.create('Ext.Container', { 布局： { 类型：'vbox' }, 项目： [ { xtype: '容器', 布局：'hbox'， 弹性：1， 项目：[ { xtype: '容器', 布局：'hbox'， 弹性：1， 项目：[ { xtype:'按钮', 文字：'家'， ui：'简单'， 样式：'背景颜色：#c9c9c9'， 身高：200， 宽度：200 } ] }, { xtype: '容器', 布局：'hbox'， 弹性：1， 项目：[ { xtype:'按钮', 文本：'新闻'， ui：'简单'， 样式：'背景颜色：#b9b9cb'， 身高：200， 宽度：200 } ] } ] }, { xtype: '容器', 布局：'hbox'， 弹性：1， 项目：[ { xtype:'按钮', 文本：'邮件'， ui：'简单'， 样式：'背景颜色：#a9c9c9'， 弹性：1 }, { xtype:'按钮', 文本：'搜索'， ui: '搜索', 样式：'背景颜色：#c9c9c9'， 弹性：1 } ] } ] }); Ext.Viewport.add(view); } });

文件：index.html

正文>

Answer 1

只需将centered:true 添加到所有按钮的配置中即可。

祝你好运。

P/S：该配置实际上将您的组件设置为其 父 组件的中心（水平和垂直）。