Как центрировать виджеты в DeckLayoutPanel в DockLayoutPanel

Question

Мой интерфейс верхнего уровня выглядит так:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui = 'urn:ui:com.google.gwt.uibinder'
             xmlns:g = 'urn:import:com.google.gwt.user.client.ui'>
  <g:FlowPanel>
    <g:DockLayoutPanel ui:field="mainApplicationWidget"
                       styleName="ui-main-panel">
      <g:north size="200">
        <g:HTMLPanel>
          <div class="banner">
            <div class="banner-text-left">
              <h3>Descriptive Text</h3>
              <h2>Title</h2>
            </div>
          </div>
        </g:HTMLPanel>
      </g:north>

      <g:center>
        <g:DeckLayoutPanel ui:field="deckLayoutPanel"
                           styleName="ui-main-deck">
        </g:DeckLayoutPanel>
      </g:center>
    </g:DockLayoutPanel>
  </g:FlowPanel>
</ui:UiBinder>

Когда я помещаю HTMLPanel в DeckLayoutPanel, я могу использовать центральный тег HTML для центрирования своего контента. Когда я добавляю любой другой виджет, он заканчивается влево. Я попытался обернуть обе панели DockLayoutPanel и DeckLayoutPanel следующим образом:

<g:VerticalPanel spacing="0" width="100%" height="100%" ui:field="mainPanel">
    <g:Cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
    <!-- content goes here -->
    </g:Cell>
</g:VerticalPanel>

на основе ответа на аналогичный вопрос, но это не сработает.

В качестве примера, одним из моих виджетов является FlowPanel, содержащая Grid. Как бы получить это по центру по горизонтали в центральной ячейке DockLayoutPanel после добавления его в DeckLayoutPanel?

Answer 1

Решение состоит в том, чтобы изменить вложенный виджет на VerticalPanel со 100% шириной и высотой и обернуть сетку в ячейку с установленным горизонтальным выравниванием, как описано выше.