我有一个 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
<!doctype html>
<html manifest="" lang="zh-CN">
<头部>
<meta charset="UTF-8">
<title>煎茶</title>
<link rel="stylesheet" href="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/resources/css/sencha-touch.css" type="text/css">
<script type="文本/javascript"
src="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
<正文>
</正文>
</html>