Question

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

我正在使用UiBinder，我已经尝试了所有实现HasVerticalAlignment（DockPanel，HorizontalPanel，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因此{{1可能会左对齐。

Answer 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中的

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

3 个答案: