2

如http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html中所述，Google 表示我们不应该使用 Horizo​​ntalPanel 和 VerticalPanel 来制作布局，因为它可能会出现一些浏览器不兼容问题。谷歌建议改用 FlowPanel。

VerticalPanel 通常可以用一个简单的 FlowPanel 代替（因为块级元素自然会垂直堆叠）。

Horizo​​ntalPanel 有点棘手。在某些情况下，您可以简单地将其替换为 DockLayoutPanel，但这需要您明确指定其子项的宽度。最常见的替代方法是使用 FlowPanel，并使用 float: left; 其子级的 CSS 属性。当然，您可以继续使用 Horizo​​ntalPanel 本身，只要您考虑到上述注意事项。

然而，我们现在遇到了另一个问题。

如何在 FlowPanel 中垂直对齐和水平对齐组件？

这行不通。

<g:FlowPanel height="100%" addStyleNames="{res.css.alignMiddle}">
.alignMiddle{
    vertical-align:middle;
}

我试过myFlowPanel.getElement().getStyle().setVerticalAlign(VerticalAlign.MIDDLE);了，但它也不起作用。

另外，另一种方法是<table>在 HTMLPanel 中使用 html 标签，但有些人说不同的浏览器可能会以不同的方式呈现 gui，<table>从而导致一些怪癖。Google 不建议<table>在 HTMLPanel 中使用，所以我们不应该使用。

但是，然后：如何在 FlowPanel 中垂直对齐和水平对齐组件？

4

1 回答 1

1

我找到了解决方案

       <g:FlowPanel addStyleNames="{res.css.outer}">
           <g:FlowPanel addStyleNames="{res.css.alignMiddle}">
                       more widget here....
           </g:FlowPanel>
        </g:FlowPanel>

        .outer {
           display: table;
           height: 100%;
           width: 100%;
         }

         .alignMiddle{
            display: table-cell;
            vertical-align: middle;
            text-align:center;
          }
于 2013-10-03T15:31:49.870 回答