如何在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中垂直對齊和水平對齊組件？

回答

相關問題