I've got a TabBar nav with a segmentedbutton that also contains a card
layout. Everything works fine. However, I'm trying to get my
segmentedbutton centered on the screen. I don't want it to stretch. I've included the main views and placed all the code on
[SenchaFiddle](http://www.senchafiddle.com/#KFylK)

![enter image description here](https://i.stack.imgur.com/drsZc.png)

![enter image description here](https://i.stack.imgur.com/2YPV8.png)

```

Ext.define('SenchaFiddle.view.SegView', {
    extend: 'Ext.Container',
    xtype: 'seg-view',

    config: {
        layout: 'fit',
        items: [
            {
                layout: 'vbox',
                items: [
                    {
                        xtype: 'segmentedbutton',
                        allowDepress: true,
                        items: [
                            {
                                text: 'Option 1',
                                pressed: true,
                                handler: function() {
                                    console.log("Picked #1");
                                    Ext.getCmp('card-container').setActiveItem(0);
                                }
                            },
                            {
                                text: 'Option 2',
                                handler: function() {
                                    Ext.Msg.alert("foo");

                                    Ext.getCmp('card-container').setActiveItem(1);
                                }
                            },
                            {
                                text: 'Option 3',
                                handler: function() {
                                    Ext.getCmp('card-container').setActiveItem(2);
                                }
                            }
                        ]
                    },
                    {
                        xtype: 'container',
                        flex: 10,
                        id: 'card-container',
                        layout: {
                            type: 'card'
                        },
                        items: [
                            {
                                xtype: 'option-view1',
                                style: 'background-color: #fff'
                            },
                            {
                                html: 'bar',
                                style: 'background-color: #666'

                            },
                            {
                                html: 'baz',
                                style: 'background-color: #333'

                            }
                        ]
                    }
                ]
            }

        ]
    }
});

```

```

Ext.define('SenchaFiddle.view.MainView', {
    extend: 'Ext.tab.Panel',
    xtype: 'test-view',
    id: 'test-view',

    config: {
        tabBarPosition:'bottom',
        layout: {
            type: 'card',
            animation: {
                duration: 300,
                easing: 'ease-in-out',
                type: 'slide',
                direction: 'left'
            }
        },
        fullscreen: true,

        items: [
            {
                title: 'Tab1',
                iconCls: 'info',
                xtype: 'panel',
                layout: {
                    type: 'fit'
                },
                items: [
                    {
                        title: 'Title 1',
                        xtype: 'toolbar',
                        docked: 'top'
                    },
                    {
                        id: 'image-tab',
                        html: 'Loading foo...'
                    },
                    {
                        xtype: 'seg-view',
                        layout: 'fit'
                    }
                ]
            },
            {
                title: 'Tab2',
                iconCls: 'action',
                items: [
                    {
                        title: 'Title 2',
                        xtype: 'toolbar',
                        docked: 'top'
                    },
                    {
                        id: 'news-tab',
                        html: 'Loading bar...'
                    }
                ]
            }
        ]
    }
});

```