如何在GXT中将图标放置在按钮中心

Question

你好，我正在处理GXT相关的工作。

我有一个带图标的按钮。

我想把图标放在中间。

目前它看起来像这样。

由于IconAlign.LEFT，按钮的图标在左边。

我想让它居中。但是没有IconAlign.CENTER这样的选项。

如果有人知道需要在代码中添加什么，请分享。

代码

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();
}

- NewCodeLearner

---

根据您放置CSS规则的位置，由于混淆可能不会应用该规则。您可能需要像使用图标一样使用ClientBundle。 - enrybo

我正在使用clientBundle..请检查更新后的areai问题。 - NewCodeLearner

Answer 1

我使用了此方法，它运行良好。

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

- NewCodeLearner

Answer 2

您可以像这样更改样式：

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

- willome

Answer 3

这个问题的最佳答案有点像黑科技，但是应该能够运行。

基本上，你可以像这样设置按钮内部的 HTML：

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

在 HTML 字符串中，您可以使用带有图像的 <div>。

不过，很可能有更好的方法。

- enrybo

Answer 4

你需要这种带有图像居中和文本在图像右侧的长按钮吗？我的意思是，你能把它用在图像在上方，文本在下方的情况下吗？就像这里 EXT GWT Showcase button。

- Kaha

---

是的，我想要带有文本和图像居中的长按钮。 我正在使用GXT，并且已经查看了http://www.sencha.com/examples/#ExamplePlace:buttons，但没有找到任何相关内容。如果您有任何想法，请分享。 - NewCodeLearner

嘿，看起来如果你知道一些图像编辑器，我找到了最简单的方法。你可以创建一个带有右侧文本的宽“图标（图像）”。例如：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

这会在文本顶部而不是像按钮（中心（左侧（图标），文本））上给我图标。 - NewCodeLearner

Answer 5

看起来在ExtJs中有一个iconAlign:'center'，所以我想知道是否可以在您的Java代码中使用具有正确JSON描述的JsObject......

- Alain BUFERNE

Answer 6

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

如果您使用"background-position:30% 70%;"，则在分辨率更改或大型显示器上会出现问题。当我们设计UI时，我们也要确保跨分辨率。

CSS设计愉快

- Web Designer cum Promoter