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

正如http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html中所述，Google表示我们不应该使用HorizontalPanel & VerticalPanel来制作布局，因为它可能有一些浏览器不兼容问题。 Google建议改用FlowPanel。如何在FlowPanel中垂直对齐和水平对齐组件？

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

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

但是，我们现在遇到另一个问题。

如何垂直对齐& FlowPanel中的水平对齐组件？

这不起作用。

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

我试过myFlowPanel.getElement().getStyle().setVerticalAlign(VerticalAlign.MIDDLE);但它也行不通。

此外，另一种方法是在HTMLPanel中使用<table> html标记，但有些人说不同的浏览器可能会不同地渲染gui，使<table>内部的小部件产生一些怪癖。谷歌不建议在HTMLPanel中使用<table>，所以我们不应该使用。

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

来源

2013-10-03 Kiti

我发现了一个解决方案

 <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-03 15:31:49 Kiti

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

回答

相关问题