Невозможно выровнять значок кнопки по центру кнопки Ext JS. ⇐ CSS

[Anonymous]

Я хочу отображать только значок на кнопке Ext JS 4.1.1 (без текста). Я хочу, чтобы ширина кнопки была немного длиннее ширины значка. При отображении значок всегда выравнивается по левому краю. Я хочу, чтобы он располагался по центру кнопки.

Я не могу добиться вышеуказанного, используя метод alignTo или фоновую позицию в CSS.

Значок представляет собой png-файл размером 32x32 пикселей.

Ext 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;
}


Подробнее здесь: https://stackoverflow.com/questions/120 ... -js-button