如何在 DockLayoutPanel 内的 DeckLayoutPanel 中居中小部件答案

【问题标题】：How do I center widgets in a DeckLayoutPanel within a DockLayoutPanel如何在 DockLayoutPanel 内的 DeckLayoutPanel 中居中小部件
【发布时间】：2018-05-17 16:46:23
【问题描述】：

我的顶级 UI 如下所示：

<!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>

当我在 DeckLayoutPanel 中放置一个 HTMLPanel 时，我可以使用 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。将它添加到 DeckLayoutPanel 后，如何在 DockLayoutPanel 的中心单元格中水平居中？

【问题讨论】：

标签： gwt uibinder

【解决方案1】：

解决方案是将封闭的小部件更改为具有 100% 宽度和高度的 VerticalPanel，并将 Grid 包装在具有上述设置的 HorizontalAlignment 的 Cell 中。

【讨论】：