How can I vertically center an element with GWT?

Question

Perhaps I haven\'t been searching the right way but I cannot figure out for the life of me how to center an element using GWT Layout Panels.

I\'m using UiBinder and I\'v

Answer 1

Have you tried setting width less than 100% ... i feel the width of HorizontalPanel becomes 100% ... so it occupies whole DockLayoutPanel and thus the FlexTable might be getting left aligned.

Answer 2

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>

Answer 3

You can use styleName attribute in your component. For Example:

<g:DockLayoutPanel>
<g:center>
    <g:HorizontalPanel width="100%" height="100%" >
        <g:FlexTable ui:field="homeData" styleName="verticalAlign"/>
    </g:HorizontalPanel>
</g:center>
</g:DockLayoutPanel>

and have

.verticalAlign{
vertical-align: middle;
}

in your style.css