無法對齊Ext JS按鈕中心的按鈕圖標

我想僅在Ext JS 4.1.1按鈕（無文本）上顯示圖標。我希望按鈕的寬度比圖標寬度稍長。顯示時，圖標始終左對齊。我希望它在按鈕中居中。無法對齊Ext JS按鈕中心的按鈕圖標

我無法使用CSS中的alignTo方法或background-position來實現上述目的。

該圖標是32x32px PNG文件。

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

來源

2012-08-23 Kabeer

你可以發佈你的代碼嗎？ –

需要你的CSS和HTML？ – Liam

剛剛也發佈了代碼。 – Kabeer

不要忘記畢竟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跨度類（這是用於放置文本，如果你在正確的位置上有）而與此方式你可以使用更大的按鈕圖標大小不只是只有16x16 - 24x24 - 32x32

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

}

來源

2012-11-09 00:20:29

無法對齊Ext JS按鈕中心的按鈕圖標

回答

相關問題