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

Question

您好我正在研究GXT

我有一个带图标的按钮。

我想把Icon放在中心位置。

目前它看起来像这样。

按钮的图标在左侧（因为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();
}

Answer 1

用过这个。它工作正常。

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

Answer 2

This question's最重要的答案是有点黑客但它应该有用。

基本上你可以在按钮中设置HTML，如下所示：

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

在HTML字符串中，您可以为图片添加<div>。

有可能更好的方式。

Answer 3

您是否需要这个长按钮，图像位于图像右侧，图像位于图像右侧？ 我的意思是，你能用它上面的图像和它们下面的文字吗？像这里EXT GWT Showcase button

Answer 4

你可以改变这样的风格：

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

Answer 5

似乎使用ExtJs有一个iconAlign:'center'，所以我想知道你是否可以在你的java代码中使用带有正确JSON描述的JsObject ......

Answer 6

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

如果您使用“background-position：30％70％;”这是分辨率变化或大尺寸显示器的问题。当我们设计UI时，我们也确保交叉分辨率。

快乐的css设计