无法在 Ext JS 按钮的中心对齐按钮图标答案

【问题标题】：Unable to align button icon in the center on the Ext JS button无法在 Ext JS 按钮的中心对齐按钮图标
【发布时间】：2012-08-18 21:04:27
【问题描述】：

我只想在 Ext JS 4.1.1 按钮上显示一个图标（无文字）。我希望按钮的宽度比图标的宽度长一点。显示时，图标始终左对齐。我希望它在按钮中居中。

我无法使用 alignTo 方法或 CSS 中的 background-position 实现上述目标。

图标是 32x32px png 文件。

外部 JS 代码：

var topToolBar = Ext.create('Ext.toolbar.Toolbar', {
                width: '100%',
                items: [{
                    iconCls: 'home32',
                    width: 60,
                    iconAlign: 'center',
                    scale: 'large'
                }]});


            var master = Ext.create('Ext.panel.Panel', {
                layout: 'anchor',
                anchor: '100% 100%',
                renderTo: Ext.getBody(),
                tbar: [topToolBar]
            });

CSS 代码：

.home32 
{
    background-position: center center;
    background-image: url( images/32/home.png ) !important;
}

【问题讨论】：

刚刚也发布了代码。

标签： css button extjs alignment

【解决方案1】：

不要忘记毕竟 Ext Js 是纯 css-html。尝试旧时的经典方式。

按钮定义

 xtype:'button',
                    iconCls:'contactIcon80',
                    iconAlign:'top',
                    width:120,
                    height:100,
                    html:'<span class="bigBtn">Damn you hayate/span>'

按钮图标类

.contactIcon80 {
background-image: url(../images/calendar80.png) !important;
width:80px!important;
height:80px!important;
margin-right: auto !important;
margin-left: auto !important;

}

Html span 类（如果你有正确的位置，这是为了放置文本）通过这种方式，您可以使用更大的按钮图标尺寸，而不仅仅是 16x16 - 24x24 - 32x32

.bigBtn {
position: absolute;
bottom: 4px  !important;

}

【讨论】：