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

【问题标题】：How can I vertically center an element with GWT?如何使用 GWT 垂直居中元素？
【发布时间】：2011-01-31 10:15:27
【问题描述】：

也许我一直没有找到正确的方法，但我终其一生都无法弄清楚如何使用 GWT 布局面板使元素居中。

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

相关的 UiBinder 提取（省略了额外的停靠布局元素）：

<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 肯定有我完全忽略的事情来做这件事吗？

【问题讨论】：

你能提供一些源代码吗（这让你失望了）？ GWT 中的垂直对齐可能很棘手，因为 HasVerticalAlignment 使用 vertical-align:middle，而不是 valign="middle"。
啊，我应该预料到的。 valign 意义上的垂直对齐在 VerticalPanel 上没有多大意义。那么既然不能提前知道这个 FlexTable 内容的高度，我应该依靠标准的 CSS 自动边距技巧吗？我希望 HasVerticalAlignment 有一些内在的魔力来解决这个与互联网一样古老的问题，但我想我应该知道得更好。 ;)

标签： gwt layout center

【解决方案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>

【讨论】：

也可以通过实例化 HorizontalPanel 并调用 setSize、setHorizontalAlignment、setVerticalAlignment 来工作

【解决方案2】：

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

【讨论】：

【解决方案3】：

您可以在组件中使用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 中

【讨论】：