어떻게 FlowPanel 내부에서 수직 정렬 및 수평 정렬 구성 요소를 사용할 수 있습니까?

Question

http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html에 명시된 바와 같이 Google은 HorizontalPanel & VerticalPanel을 사용하여 브라우저 비 호환성 문제가 발생할 수 있으므로 레이아웃을 작성하지 말아야한다고했습니다. Google은 대신 FlowPanel을 사용할 것을 제안합니다.

VerticalPanel은 일반적으로 단순한 FlowPanel로 대체 될 수 있습니다 (블록 레벨 요소는 자연스럽게 수직으로 겹침).

HorizontalPanel은 약간 번쩍입니다. 경우에 따라 DockLayoutPanel로 바꾸기 만하면됩니다.이 경우에는 어린이의 너비를 명시 적으로 지정해야합니다. 가장 일반적인 대안은 FlowPanel을 사용하고 float : left;를 사용하는 것입니다. CSS 속성 물론 위의주의 사항을 고려하는 한 HorizontalPanel 자체를 계속 사용할 수 있습니다.

그러나 이제 다른 문제가 발생합니다.

& 수평 정렬 구성 요소를 FlowPanel 내부에서 수직 정렬하는 방법은 무엇입니까?

이것은 작동하지 않습니다.

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

시도했지만 시도했지만 작동하지 않습니다.

또 다른 접근법은 HTMLPanel 안에 <table> HTML 태그를 사용하는 것입니다. 그러나 어떤 사람들은 다른 브라우저가 내부의 위젯을 다르게 렌더링 할 수 있다고 말합니다. Google은 HTMLPanel 안에 <table>을 사용하지 않기 때문에 사용해서는 안됩니다.

하지만, & 수평 정렬 구성 요소를 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; 
      }