Creating a 2x2 Button Grid with Centered Buttons?

Question

I have a 2x2 button grid. Now I'd like to shrink the buttons to 200x200, place each in a container as a space place holder, then center each button in its respective container.

In my image, I've only shrunk the two top buttons so you can see the spacing on the page. How can I go from the first image to the second image, which was Photoshop'ed?

enter image description here

The goal: (actually, all 4 centered buttons is the goal) enter image description here

File: app.js

Ext.application({

    launch: function() {
        var view = Ext.create('Ext.Container', {
            layout: {
                type: 'vbox'
            },
            items: [
                {
                    xtype: 'container',
                    layout: 'hbox',
                    flex: 1,
                    items:[
                        {
                            xtype: 'container',
                            layout: 'hbox',
                            flex: 1,
                            items:[
                                {
                                    xtype:'button',
                                    text: 'Home',
                                    ui: 'plain',
                                    style: 'background-color: #c9c9c9',
                                    height: 200,
                                    width: 200
                                }
                            ]
                        },
                        {
                            xtype: 'container',
                            layout: 'hbox',
                            flex: 1,
                            items:[
                                {
                                    xtype:'button',
                                    text: 'News',
                                    ui: 'plain',
                                    style: 'background-color: #b9b9cb',
                                    height: 200,
                                    width: 200
                                }
                             ]
                        }
                    ]
                },
                {
                    xtype: 'container',
                    layout: 'hbox',
                    flex: 1,
                    items:[
                        {
                            xtype:'button',
                            text: 'Mail',
                            ui: 'plain',
                            style: 'background-color: #a9c9c9',
                            flex: 1
                        },
                        {
                            xtype:'button',
                            text: 'Search',
                            ui: 'Search',
                            style: 'background-color: #c9c9c9',
                            flex: 1
                        }
                    ]
                }
            ]
        });
        Ext.Viewport.add(view);
    }
});

File: index.html

<!doctype html>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Sencha</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="text/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>
<body>
</body>
</html>

Thiem Nguyen Thiem Nguyen · Accepted Answer · 2012-04-12T15:51:03

Simply add centered:true to the configuration of all your buttons.

Good luck.

P/S: that config actually set your component to the center (horizontally & vertically) of its parent component.

Creating a 2x2 Button Grid with Centered Buttons?

1 Answers