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

ExtJs には があるようですので、Java コードで適切な JSON 記述をiconAlign:'center'使用して a を使用できないでしょうか......JsObject

于 2013-04-11T11:42:12.730 に答える
0

画像が中央にあり、テキストが画像の右側にある、まさにこの長いボタンが必要ですか? つまり、画像を上に、テキストを下に置いて使用できますか? ここのようにEXT GWT Showcase ボタン

于 2013-04-11T06:07:57.913 に答える
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

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

「background-position:30% 70%;」を使用する場合 解像度の変更または大型モニターでの問題です。UI を設計するときは、クロス解像度についても確認します。

cssによる幸せなデザイン

于 2013-04-18T09:46:01.247 に答える
0

この質問の一番の答えは少しハックですが、うまくいくはずです。

基本的に、次のようにボタン内に HTML を設定できます。

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

<div>HTML 文字列内に、画像とともにを配置できます。

しかし、おそらくもっと良い方法があります。

于 2013-04-10T19:21:06.670 に答える