6

おそらく私は正しい方法を探していませんでしたが、GWTレイアウトパネルを使用して要素を中央に配置する方法を一生理解できません。

私は UiBinder を使用しており、HasVerticalAlignment (DockPanel、Horizo​​ntalPanel、VerticalPanel) を実装するすべてのパネルを試しました。それらのどれも、垂直方向の配置 (または水平方向でさえ) を設定しても影響を与えないようです。幅と高さが 100% であることを確認し、ブラウザから結果の DOM レイアウトを調べましたが、これらのプロパティから何も変更されていないようです。

関連する UiBinder の抜粋 (余分な Docklayout 要素は省略されています):

<g:DockLayoutPanel>
<g:center>
    <g:HorizontalPanel width="100%" height="100%" >
        <g:FlexTable ui:field="homeData" />
    </g:HorizontalPanel>
</g:center>
</g:DockLayoutPanel>

私が見つけた迅速で汚い修正は、基本的に valign="middle" セルを持つ HTML テーブルを持つ HTMLPanel のラッパーである独自の "CenterPanel" ウィジェットを作成することです。ただし、これは基本的に、従来の css レイアウトの中間センタリングの問題への逆戻りのように感じます。確かにGWTには、私が完全に見落としていたこれを行う何かがありますか?

4

3 に答える 3

7

次のような cell 要素を使用して、アイテムを中央に配置できます。

<g:HorizontalPanel width="100%" height="100%">
 <g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
  <g:Label>Hello Center</g:Label>
 </g:cell>
</g:HorizontalPanel>
于 2011-07-17T18:41:28.233 に答える
0

width100％未満に設定してみましたか...の幅HorizontalPanelが100％になっているように感じます...全体DockLayoutPanelを占めるため、FlexTable左揃えになる可能性があります。

于 2010-03-25T13:36:04.793 に答える
0

styleNameコンポーネントで属性を使用できます。例えば：

<g:DockLayoutPanel>
<g:center>
    <g:HorizontalPanel width="100%" height="100%" >
        <g:FlexTable ui:field="homeData" styleName="verticalAlign"/>
    </g:HorizontalPanel>
</g:center>
</g:DockLayoutPanel>

そして持っている

.verticalAlign{
vertical-align: middle;
}

あなたのstyle.cssで

于 2011-11-16T06:22:15.620 に答える