按钮图标水平对齐iconAlign:"top"

Question

在ExtJS 4中,我试图创建一个垂直方向ButtonGroup,只需一个按钮即可启动:

new Ext.ButtonGroup({
    columns: 1,
    region: "west",
    collapsible: false,
    defaults: {
      scale: "large",
      iconAlign: "top"
    },
    items: [{
      text: "Your Books",
      iconCls: "icon-books"
    } ]
  })

CSS规则只指定背景图像:

.icon-books {
   background-image: url(/images/book_open.png) !important;
}

但是,图像向左齐平,如下所示:

我是ExtJS的n00b,所以我确信有一些我不知道的东西.iconAlign: "top"除了冲洗顶部之外,我原本期望将图像水平居中对齐,但这似乎不会发生.我在Firefox 6.0.2和Chrome 13.0上看到了相同的效果.

我缺少什么配置选项或CSS规则？

谢谢!

更新:这是一个展示问题的示例项目.

Answer 1

iconAllign: 来自 extjs 的 top 只是将图标设置在文本上方，而不是居中。为了使项目居中，你必须处理CSS......

.icon-books {
   background-image: url(/images/book_open.png) !important;
   background-position:center;

}

我认为这应该可以做到...