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

【问题标题】：Button icon horizontal alignment with iconAlign: "top"按钮图标水平对齐 iconAlign: "top"
【发布时间】：2011-09-08 17:14:25
【问题描述】：

在 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，所以我确信我缺少一些明显的东西。我本来希望iconAlign: "top" 将图像水平居中对齐，而不是平顶，但这似乎不是发生的情况。我在 Firefox 6.0.2 和 Chrome 13.0 上看到了相同的效果。

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

谢谢！

更新：here is a sample project 演示了问题。

【问题讨论】：

stackoverflow.com/questions/9881758/…

标签： extjs extjs4

【解决方案1】：

我认为图像本身有问题，或者其他一些 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 干扰 Ext 定义的图标类

【讨论】：

图像是纯 32x32 像素的 PNG 文件。除了您在上面看到的规则之外，没有任何手动 CSS 会影响此元素。如果重要，Button 位于Viewport 的west 部分的ButtonGroup 中。我添加了一个指向演示问题的示例项目的链接。我远不是 CSS 专家（这就是我首先使用 ExtJS 的原因），但我同意事情应该按照我的判断进行。但是，它们不是... :-) 谢谢！
您的ext-all.css 文件有问题。根据文档，“默认情况下，图像将设置为按钮的背景图像 CSS 属性，因此如果您想要混合图标/文本按钮，请设置 cls:'x-btn-text-icon')”。在您的css 中，我找不到任何带有x-btn-text-icon 的内容。
x-btn-text-icon 在 ExtJS 4.0.2a 中的任何地方都不存在，sandbox 示例除外。
我猜你可以下载ext-all.css文件再试一次..我不使用Ext JS 4，所以我没有办法检查版本是否有冲突您已下载以及其他人正在使用的内容。但是从 ExtJS 3.3.1 开始，x-btn-text-icon 存在于css 中，如上面回答中所述。但从文档中的内容来看，我只能得出结论，您使用的 ext-all.css 版本似乎存在一些差异。谢谢:)

【解决方案2】：

对于 ExtJS 4.0，以下内容对我有用：我必须覆盖 x-... 类设置的 16px 的默认宽度。

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

iconCls: 'star backcenter'

然后将其设置为居中，使用 width:auto 覆盖 16px。神奇地它对我有用。

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

【讨论】：

【解决方案3】：

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

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

}

我认为应该这样做......

【讨论】：

这听起来很可信，但似乎没有影响。在 Firebug 中查看内容时，我的 .icon-books 规则中的 background-position 在突出显示元素时带有删除线。如果我正确理解 Firebug，我的请求将被覆盖......但覆盖似乎是针对center top，这似乎会给我我想要的东西。然而，这不是视觉效果。
对我来说它可以工作，但对于正常大小的图标...对于大尺寸我检查了 extj css，显然它包含 .x-btn-default-large-ml,{zoom:1;background- image:url('../../resources/themes/images/default/btn/btn-default-large-sides.gif');background-position:0 0} 并且图标显示在ml标签中按钮 div ...所以也许您可以检查是否有相同的，...我希望这会有所帮助
scale 似乎只支持small、medium 和large，而不是normal。我试过medium 仍然有同样的视觉效果，只是更小了。如果我无法找到解决方案，我将切换到 iconAlign="left"。不过谢谢！

【解决方案4】：

我通过向按钮添加 css 属性 (style:{paddingLeft:'10px'}) 来改进此问题。

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

【讨论】：