Centering GWT Elements in UIBinder

Question

I am trying to center a TabLayoutPanel in a uibinder and having no luck whatsoever. As you can see below, I've tried every CSS trick I can think of. Can anyone assist?

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

Solution

Centering an item can be done with a cell element like this:

<g:HorizontalPanel width="100%" height="100%">
 <g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
  <g:Label>Hello Center</g:Label>
 </g:cell>
</g:HorizontalPanel>

Comments

[Chris Lercher]

The reason I don't use this solution is, that it applies the style to all TabLayoutPanels on the page, although it's defined locally in a <ui:style> .. I really like the fact that each UiBinder file has its own "namespace"; global definitions should go in a global CSS file in my opinion.