如何把圖標放在GXT中按鈕的中心

嗨，我正在使用GXT如何把圖標放在GXT中按鈕的中心

我有一個帶有圖標的按鈕。

我想把Icon放在中間。

目前看起來像這樣。

enter image description here

按鈕的圖標是在左（因爲IconAlign.LEFT的）。

我想要它在中心。但是有沒有像IconAlign.CENTER

如果任何人有一個想法是什麼在code.Please共享添加

代碼

button.setIconAlign(IconAlign.LEFT); 
button.setIcon(Resources.INSTANCE.modify()); 
button.setStyleName("project-Button");

CSS

.project-Button { 
    color: Black; 
    border: thin outset #FF6600; 
    font-family: Courier New, Century Gothic, Times New Roman, Verdana, Arial; 
    vertical-align: middle; 
    text-align: center; 
    background-color: White; 
    cursor: pointer; 
}

預先感謝您

更新

public interface Resources extends ClientBundle { 

    public Resources INSTANCE = GWT.create(Resources.class); 

    @Source("Images/modify.png") 
    ImageResource modify(); 
}

來源

2013-04-10 NewCodeLearner

根據您放置該CSS規則的位置，它可能由於混淆而無法應用。您可能需要像使用圖標一樣使用「ClientBundle」。 – enrybo 2013-04-10 19:12:06

我正在使用clientBundle .. Plz chk更新areai問題。 – NewCodeLearner 2013-04-11 08:34:31

用過這個。它工作正常。

vertical-align: middle; 
text-align: center; 
background-position:30% 70%;

來源

2013-04-15 10:04:11 NewCodeLearner

This question's最多的回答是一個黑客位，但它應該工作。

基本上你可以像這樣在按鈕中設置的HTML：

Button button = new Button(); 
String html = "..."; 
button.setHTML(html);

中的HTML字符串，就可以把<div>與圖像。

雖然有更多的可能更好的方法。

來源

2013-04-10 19:21:06 enrybo

你是否需要這個長按鈕，圖像的中心和圖像右側的文字？我的意思是，你可以將它與頂部的圖像和它們下面的文字一起使用嗎？喜歡這裏EXT GWT Showcase button

來源

2013-04-11 06:07:57 Kaha

是的，我想要長按鈕的文字和圖像在中心。我正在使用GXT，並且檢查了http://www.sencha.com/examples/#ExamplePlace:buttons但找不到任何東西。我有任何想法如何做到這一點，請分享。 – NewCodeLearner 2013-04-11 08:33:32

嘿，看起來像我發現最簡單的方法，如果你知道一些圖像原子。您可以在右側創建一個寬度爲「圖標（圖片）」的文字。 F.E. Button btn = new com.extjs.gxt.ui.client.widget.button.Button（「」）; btn.setScale（Style.ButtonScale.MEDIUM）; btn.setIconAlign（Style.IconAlign.TOP）; btn.setIcon（IconHelper.create（「images // image_with_text.png」，120,22））; – Kaha 2013-04-11 09:51:41

這給我的文字頂部的圖標不像按鈕（中心（左（圖標），文本）） – NewCodeLearner 2013-04-11 10:34:21

你可以改變風格是這樣的：

.x-btn-text-icon .x-btn-text { 
    position: relative; 
    white-space: nowrap; 
    outline: 0 none; 
    overflow: hidden; 
    width: 86px; 
    margin: 0; 
    cursor: pointer; 
    border: 0 none; 
    font: normal 11px arial,tahoma,verdana,helvetica; 
    color: #333; 
    background: transparent; 
    background-position: 0 center; 
    background-repeat: no-repeat; 
    height: 32px; 
    ... 
}

來源

2013-04-11 09:38:50 willome

這也不工作..你有任何其他的想法 – NewCodeLearner 2013-04-12 12:27:11

這似乎與ExtJS的存在iconAlign:'center'，所以我不知道，如果你能在Java代碼中使用與正確的JSON描述一個JsObject ......

來源

2013-04-11 11:42:12

使用.center {margin:0, auto; }如果使用

「背景位置：30％70％;」這是分辨率變化或大尺寸顯示器的問題。當我們設計UI時，我們也要確保交叉解析。

由css快樂設計

來源

2013-04-18 09:46:01

如何把圖標放在GXT中按鈕的中心

回答

相關問題