如何把图标放在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中按钮的中心

回答

相关问题