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

Posted 2023-03-06

【中文标题】创建带有居中按钮的 2x2 按钮网格？

【英文标题】：Creating a 2x2 Button Grid with Centered Buttons?

【发布时间】：2012-04-24 23:30:11

【问题描述】：

我有一个 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

正文>

【参考方案1】：

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

祝你好运。

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