Java 如何独立于GWT中的DockPanel.CENTER设置DockPanel.NORTH元素的样式

在我的GWT应用程序中，我使用了一个停靠面板，

DockPanel.NORTH

是一个

MenuBar

组件，实现了我的导航栏，而

DockPanel.CENTER

位置的组件根据导航栏中选择的选项显示不同的面板（是

DeckPanel

）

我的问题是

DockPanel.NORTH

上的导航栏总是向左对齐。当DeckPanel切换到更宽的组件时，导航栏也会移动。因此，对于

DeckPanel

中的每个面板，导航栏可能位于不同的位置，这对用户来说很烦人。如果

DockPanel.NORTH

中的这个组件可以始终居中，那对我来说就太好了，但是我似乎可以居中

DockPanel

本身，而不是

DockPanel.NORTH

中的组件

此DockPanel中的所有组件都使用

.navigationPanel{
    margin-left: auto;
    margin-right: auto;
    text-align:justify;
}

菜单栏

项的GWT UI活页夹为：

<g:DockPanel>
    <g:Dock direction='NORTH' >
        <g:MenuBar ui:field="mainMenu"/>
    </g:Dock>
</g:DockPanel>

在

MenuBar

组件

UiBinder

界面上的样式属性

---

有人能帮我纠正这种行为吗？

这只是一个想法，可能会有帮助。如果不看到整个模板，我不知道。尝试将菜单栏包装在SimplePanel或FlowPanel中，并为display:block添加样式。这只是一个猜测，因为我不完全确定你的问题是什么样子的。您还应该在DockPanel上设置宽度，以防止它一直调整大小。最好是它有一个宽度，这样它就可以知道菜单栏的初始中心位置。否则，它将在容器增大或缩小时移动

<style>

.menubar-wrapper {
  width: 100px;
  margin: 0 auto;
}
</style>


<g:DockPanel>
    <g:Dock direction='NORTH' >
        <g:SimplePanel styleName="{style.menubar-wrapper}">
            <g:MenuBar ui:field="mainMenu"/>
        </g:SimplePanel>
    </g:Dock>
</g:DockPanel>

.menubar包装器{
宽度：100px；
保证金：0自动；
}

---

如果这没有帮助，您可以尝试为float:left向菜单栏添加样式

谢谢，但没用。为了更好地解释我的问题，我编辑了答案。我的问题是，即使我将DockPanel居中，位于NORTH位置的组件似乎也会向左对齐，因此在居中显示的组件更改其宽度时，组件似乎会移动。谢谢，我无法将导航栏居中放置在NORTH位置，但至少现在它不会在每次选择新面板时“滑动”。我会给这个问题更多的时间，如果我找不到合适的解决办法，我会接受你的回答，认为这是最有帮助的。再次感谢。您应该尝试打开浏览器的开发工具并查看布局。您还可以在那里调整样式以使其正确。简单面板的父容器也需要设置宽度。如果它有一个宽度，那么包装应该居中。是的，谢谢。我通常使用开发工具，并将这些属性放在UI活页夹或CSS中。我认为我通过为DockPanel和导航栏组件设置一个宽度，并在导航栏组件的两侧添加填充，找到了一个不错的解决方案。所以，我认为它可以保持这样，这样我就可以转移到应用程序中更有意义的部分。再次感谢。如果你认为这个问题值得的话，我可以进行一些投票。dock panel是否设置了宽度参数？如果没有，这可能会有所帮助。您还可以通过添加宽度和设置边距选项来居中包装面板。我会更新答案。看这里

<style>

.menubar-wrapper {
  width: 100px;
  margin: 0 auto;
}
</style>


<g:DockPanel>
    <g:Dock direction='NORTH' >
        <g:SimplePanel styleName="{style.menubar-wrapper}">
            <g:MenuBar ui:field="mainMenu"/>
        </g:SimplePanel>
    </g:Dock>
</g:DockPanel>