setting a button in the middle of a horizontal layout

Vaadin 6 / 7 / 8
1

Hi

I want to add a button the middle of horizontal layout.

HorizontalLayout signOutButtonLayout = new HorizontalLayout();
          signOutButtonLayout.setWidth("100%");
        final Button signoutButton = new Button("Sign Out");
        signoutButton.setStyleName("signoutbuttons");
           signoutButton.setWidth("150px");
        signoutButton.setHeight("40px");

        signOutButtonLayout.addComponent(signoutButton);
    signOutButtonLayout.setComponentAlignment(signoutButton, Alignment.MIDDLE_CENTER);
        signoutButton.addClickListener(getClickListeners());

but it doesnt seem to get added in the middle. It is always showin the left hand corner? Any idea

2

Clare Jone,
check your css style, the problem is probably there. Also if you want the button to be in the middle of the page you should specify the the height of the horizontal layout(for example setSizeFull()).
Here is an example of init method in UI class, which places the button in the middle of the page:
@Override
protected void init(VaadinRequest request) {
HorizontalLayout signOutButtonLayout = new HorizontalLayout();
signOutButtonLayout.setSizeFull();
final Button signoutButton = new Button(“Sign Out”);
// signoutButton.setStyleName(“signoutbuttons”);
signoutButton.setWidth(“150px”);
signoutButton.setHeight(“40px”);

    signOutButtonLayout.addComponent(signoutButton);
    signOutButtonLayout.setComponentAlignment(signoutButton,
            Alignment.MIDDLE_CENTER);
    setContent(signOutButtonLayout);
}
3

Also the problem might be that the parent element’s of your signOutButtonLayout size is set to Undefined. You can check that by expecting DOM of you page in browser (ctrl+shift+j in Chrome)