我试图将一个TabLayoutPanel置于一个uibinder中,并且没有任何运气.正如你在下面看到的,我已经尝试了我能想到的每一个CSS技巧.有人可以帮忙吗？
<ui:style>
.gwt-TabLayoutPanel {
vertical-align: middle;
text-align: center;
margin-left: auto;
margin-right: auto;
border-top: 1px solid #666;
border-left: 1px solid #999;
border-right: 1px solid #666;
}
</ui:style>
<g:VerticalPanel ui:field="userInterfacePanel" width="100%">
<mapmaker:MapBox ui:field="mapBox"/>
<g:TabLayoutPanel barHeight="20" ui:field="interfaceTabs" height="300px" width="80%" >
<g:tab>
<g:header>Lines</g:header>
<g:Label>Select Line Data Here</g:Label>
</g:tab>
<g:tab>
<g:header>Features</g:header>
<g:Label>Select Features Data Here</g:Label>
</g:tab>
<g:tab>
<g:header>Help</g:header>
<g:Label>Help goes here</g:Label>
</g:tab>
</g:TabLayoutPanel>
<g:HorizontalPanel>
<g:Button>Generate KML</g:Button>
<g:Button>Generate Shapefile</g:Button>
</g:HorizontalPanel>
</g:VerticalPanel>
小智 16
可以使用如下单元格元素来对项目进行居中:
<g:HorizontalPanel width="100%" height="100%">
<g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
<g:Label>Hello Center</g:Label>
</g:cell>
</g:HorizontalPanel>
这里的问题是，这.gwt-TabLayoutPanel不会应用于您的 TabLayoutPanel。这是因为 GWT 的 UiBinder 样式中的类名将在生成的 CSS 中被混淆。
基本上有两种解决方案：
a) 将 CSS 放入.gwt-TabLayoutPanel纯 CSS 文件中。使用以下命令将该文件包含在您的 HTML 页面中
<head>
...
<link type="text/css" rel="stylesheet" href="My.css">
...
</head>
这样，类名就不会被混淆。
b) 或者（可能更好），在 UiBinder<style>部分中，使用任意类名，例如.panel，并像这样更改代码：
<ui:style>
.panel {
vertical-align: middle;
text-align: center;
margin-left: auto;
margin-right: auto;
border-top: 1px solid #666;
border-left: 1px solid #999;
border-right: 1px solid #666;
}
</ui:style>
...
<g:TabLayoutPanel barHeight="20" ui:field="interfaceTabs"
height="300px" width="80%"
addStyleNames="{style.panel}" >
这样，样式定义和面板的类属性中的类名称都会被混淆。
现在你的面板应该居中了。