Sencha touch 2 Sencha Touch：在数据视图中将项目垂直居中对齐

我有一个使用数据视图的水平列表，我试图显示一个图像列表。我想显示它在垂直中心对齐。但是，它总是与顶部对齐

以下是我的看法：

Ext.define('horizList.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
    'Ext.TitleBar',
    'Ext.Video',
    'Ext.List'
],
config: {
    tabBarPosition: 'bottom',

    items: [

        {
            title: 'Get Started',
            iconCls: 'action',

            items: [
                {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Getting Started'
                },
                {
                    xtype: 'container',
                    flex:1.5,
                    layout: {
                        type: 'vbox',
                        pack: 'center'
                    },
                    items:[{
                           xtype:'dataview',
                           //flex          : 1,
                           //defaultType   : 'myapp-dataitem',
                           height: 400,
                           scrollable: {
                                direction: 'horizontal',
                                directionLock: true
                           },
                           inline        : {
                                wrap : false
                           },

                           //layout:'hbox',
                           itemId:'foodCatalogWrapper',
                           store: 'foodCatalogStore',
                           itemTpl:new Ext.XTemplate('<img src="{[this.image(values)]}" />',
                                               {
                                                     image: function(value){
                                                        var imgUrl = baseUrl + value.IMAGE;
                                                        return imgUrl;
                                                     }
                                               })
                           }]
                  }]
         }]
     }
});

我不能附上一个截图，因为我没有足够的声誉点

需要做什么来显示垂直对齐的项目中心。

---

提前谢谢。

我解决了这个问题。原因是宽度被认为是100%。一旦我把它去掉，它就起作用了

.x-dataview {
  background-color: transparent;
  border:5px solid #0000FF !important;
  .x-dataview-item {
    padding: 1px 0;
    text-align: center;
    vertical-align: middle;
    border:5px solid #FFFF00 !important;
    color: #000;
    img {
        margin: 10px 1px;
    }
  }
}

.x-dataview .x-dataview-item.x-item-selected {
    border:5px solid #FFFFFF !important;
}