6

Perhaps I haven't been searching the right way but I cannot figure out for the life of me how to center an element using GWT Layout Panels.

I'm using UiBinder and I've tried all panels that implement HasVerticalAlignment (DockPanel, HorizontalPanel, VerticalPanel). None of them seem to have any impact from setting vertical alignment (or even horizontal). I've made sure they're taking 100% width and height, inspected the resulting DOM layout from my browser and nothing seems to be changed from those properties.

Pertinent UiBinder extract (with extra docklayout elements omitted):

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

The quick and dirty fix I've figured out is to create my own "CenterPanel" widget which basically is a wrapper around a HTMLPanel with a HTML table with a valign="middle" cell. However, this basically feels like a throwback to the classical css-layout middle centering problems. Surely GWT has something to do this that I've completely overlooked?

4

3 回答 3

7

可以使用像这样的单元格元素来使项目居中：

<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

您可以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 回答
0

您是否尝试过设置width小于 100% ......我觉得宽度HorizontalPanel变成 100% ......所以它占据了整个空间DockLayoutPanel，因此FlexTable可能会左对齐。

于 2010-03-25T13:36:04.793 回答