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

也许我一直没有找到正确的方法，但我一生都不知道如何使用GWT布局面板将元素居中

我正在使用UiBinder，我已经尝试了所有实现HasVerticalAlignment的面板（DockPanel、HorizontalPanel、VerticalPanel）。设置垂直对齐（甚至水平对齐）似乎没有任何影响。我已经确定它们的宽度和高度都是100%，并从我的浏览器中检查了生成的DOM布局，这些属性似乎没有任何变化

相关UiBinder摘录（省略额外docklayout元素）：

---

我想出了一个快速而肮脏的解决方案，就是创建我自己的“CenterPanel”小部件，它基本上是一个围绕着HTMLPanel的包装器，带有一个带有valign=“middle”单元格的HTML表。然而，这基本上感觉像是回到了经典的css布局中间居中问题。当然，GWT与此有关，我完全忽略了这一点？

您是否尝试将

宽度设置为小于100%。。。我觉得
水平面板的宽度变成了100%。。。因此，它占据了整个
DockLayoutPanel
，因此
FlexTable
可能会左对齐。
可以使用如下单元格元素使项目居中：

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


你好中心
您可以在组件中使用
styleName
属性。例如：

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

在你的style.css中，你能提供一些源代码吗？GWT中的垂直对齐可能很棘手，因为HasVerticalAlignment使用的是
垂直对齐：middle
，而不是
valign=“middle”
。啊，我本该期望如此。在垂直面板上，valign意义上的垂直对齐没有多大意义。那么既然我不能预先知道这个FlexTable内容的高度，我应该依靠标准的CSS自动边距技巧吗？我希望HasVerticalAlignment有一些内部魔法来解决这个问题，就像互联网一样古老，但我想我应该知道得更清楚还可以通过实例化HorizontalPanel并调用setSize、setHorizontalAlignment和setVerticalAlignment来工作
<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;
}