Extjs 按钮图标与图标对齐：“图标”；top"；

在ExtJS 4中，我试图创建一个垂直方向的

按钮组

，其中一个按钮开始：

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规则

谢谢

---

更新：演示问题。

iconAllign:top from extjs只是将图标设置为在文本上方，而不是居中。要使项目居中，您必须处理css

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

}

---

我想这应该可以

我认为图像本身有问题，或者是其他css类导致了这个问题。当设置了

iconAlign:'top'

时，Ext Js会自动将图标居中。以下是css中所写的内容：

.x-btn-text-icon .x-btn-icon-small-top .x-btn-text{
    background-position: center 0;
    background-repeat: no-repeat;
    padding-top:18px;
}

当我自己尝试时，我一点问题都没有

---

如您所见，图标完全对齐。请检查是否有其他css干扰了ExtJS 4.0中由Ext定义的图标类，以下操作对我有效：我必须覆盖x-。。。上课

在我的按钮中，我添加了自己的自定义类（注意，“star”类只是加载背景图像）

然后将其设置为居中，宽度为：auto以覆盖16px。神奇的是它对我有效

.backcenter { 
   background-position:center  !important;
   width: auto !important;
}

---

我通过向按钮添加css属性（

style:{paddingLeft:'10px'}

）来改进这个问题

text:'<b>Cancel</b>',
name:'btCancel',
iconCls:'btCancel',
width:89,
height:37,
style:{paddingLeft:'10px'}

text:“取消”，
名称：'btCancel'，
iconCls:'btCancel'，
宽度：89，
身高：37，
样式：{paddingLeft:'10px'}

这听起来可信，但似乎没有影响。当查看Firebug中的内容时，在突出显示元素时，“我的<代码>中的<代码>背景位置。图标书规则将以删除线显示。如果我正确理解Firebug，我的请求将被覆盖。。。但覆盖似乎是针对

中间顶部

，这似乎可以满足我的需求。然而，这不是视觉效果。对我来说，它的工作，但正常大小的图标。。。对于scale-large，我检查了extj css，它包含.x-btn-default-large-ml，{zoom:1；背景图像：url（'../../resources/themes/images/default/btn/btn default large sides.gif'）；背景位置：0}，图标显示在按钮div的ml标记中。。。所以也许你可以检查一下你是否有相同的，。。。我希望这有助于

缩放

似乎只支持

小型

、

中型

和

大型

，而不是

普通

。我尝试了

中等

，但仍然有相同的视觉效果，只是更小。如果我无法找到解决方案，我将切换到

iconAlign=“left”

。不过，谢谢！这些图像是纯32x32像素的PNG文件。除了上面的规则之外，没有任何手动CSS会影响此元素。如果重要，则

按钮

位于

视口

的

边界布局

部分的

按钮组

。我已经添加了一个链接到一个演示该问题的示例项目。我远非CSS专家（这就是为什么我首先使用ExtJS的原因），但我同意，从我所能说的来看，事情应该是正常的。但是，它们不是…：-）谢谢您的

ext all.css

文件有问题。根据文档，“默认情况下，图像将设置为按钮的背景图像CSS属性，因此如果您想要混合图标/文本按钮，请设置

cls:'x-btn-text-icon'

）”。在您的

css

中，我找不到任何包含

x-btn-text-icon

的内容。

x-btn-text-icon

在ExtJS 4.0.2a中的任何地方都不存在，除了

沙盒

示例中。我想您可以下载

ext-all.css

文件并重试。。我不使用ExtJS4，所以我没有办法检查您下载的版本和其他人使用的版本是否存在冲突。但在extjs3.3.1中，

x-btn-text-icon

存在于

css

中，如上文所述。但是从文档中所写的内容来看，我只能得出结论，您正在使用的

ext-all.css

版本似乎存在一些差异。谢谢：）

text:'<b>Cancel</b>',
name:'btCancel',
iconCls:'btCancel',
width:89,
height:37,
style:{paddingLeft:'10px'}