如何使用GWT垂直居中元素？

Question

也许我没有一直在寻找正确的方法,但我无法弄清楚如何使用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>

我想到的快速而肮脏的修复是创建我自己的"CenterPanel"小部件,它基本上是一个HTMLPanel的包装器,带有一个带有valign ="middle"单元格的HTML表.然而,这基本上就像是对经典的css-layout中间居中问题的回归.当然GWT有一些事情要做,我完全忽视了吗？

Answer 1

可以使用如下单元格元素来对项目进行居中:

<g:HorizontalPanel width="100%" height="100%">
 <g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
  <g:Label>Hello Center</g:Label>
 </g:cell>
</g:HorizontalPanel>

Answer 2

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