Question

如http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html所述，Google表示我们不应该使用HorizontalPanel＆amp; VerticalPanel用于制作布局，因为它可能存在一些浏览器不兼容问题。谷歌建议改用FlowPanel。

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

HorizontalPanel有点棘手。在某些情况下，您只需将其替换为DockLayoutPanel，但这需要您明确指定其子宽度。最常见的替代方法是使用FlowPanel，并使用float：left;其子项的CSS属性。当然，只要您将上述警告考虑在内，您就可以继续使用HorizontalPanel。

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

如何纵向对齐＆amp; FlowPanel内的水平对齐组件？

这不起作用。

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

我尝试了myFlowPanel.getElement().getStyle().setVerticalAlign(VerticalAlign.MIDDLE);但它也无效。

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

但是，那么：如何垂直对齐＆amp; FlowPanel内的水平对齐组件？

Answer 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;
          }

我怎么能垂直对齐＆amp; FlowPanel内的水平对齐组件？

1 个答案: