Как можно выравнивать по вертикали и горизонтально выравнивать компоненты внутри FlowPanel?

Question

Как указано в http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html, Google сказал, что мы не должны использовать HorizontalPanel & VerticalPanel для создания макетов, так как он может иметь некоторые проблемы несовместимости с браузером. Вместо этого Google предлагает использовать FlowPanel.

Вертикальная панель обычно может быть заменена простой 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);, но он также не работает.

Кроме того, другой подход заключается в использовании тега html <table> внутри HTMLPanel, но некоторые люди говорят, что разные браузеры могут визуализировать gui по-разному виджеты внутри <table>, вызывая некоторые причуды. Google не предлагает использовать <table> внутри HTMLPanel, поэтому мы не должны использовать.

Но, то: Как вертикально выровнять & горизонтально-выровнять компоненты внутри 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; 
      }