4

嗨，我正在研究 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();
}
4

6 回答 6

2

用了这个。它工作正常。 

vertical-align: middle;
text-align: center;
background-position:30% 70%;
于 2013-04-15T10:04:11.123 回答
0

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

如果你使用“背景位置：30% 70%;” 这是分辨率变化或大尺寸显示器的问题。当我们设计 UI 时，我们也会确保交叉分辨率。

快乐的 CSS 设计

于 2013-04-18T09:46:01.247 回答
0

这个问题的最佳答案有点小技巧，但它应该可以工作。

基本上，您可以像这样在按钮中设置 HTML：

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

在 HTML 字符串中，您可以<div>在图像中放置一个。

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

于 2013-04-10T19:21:06.670 回答
0

您可以像这样更改样式：

.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-11T09:38:50.560 回答
0

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

于 2013-04-11T11:42:12.730 回答
0

您是否需要这个长按钮，图像在中心，文本在图像右侧？我的意思是，您可以将它与顶部的图像和它们下方的文本一起使用吗？像这里一样EXT GWT Showcase 按钮

于 2013-04-11T06:07:57.913 回答