Vaadin Alignment with GridLayout to center over cells

Question

I trying to get image and title to be in the center

the login in box works OK

private void createTitle(final AbstractOrderedLayout parentLayout) {
    GridLayout layout = new GridLayout(6, 2);
    layout.setSpacing(true);
    layout.setWidth( 100, Sizeable.Unit.PERCENTAGE );
    layout.setHeight( 100, Sizeable.Unit.PERCENTAGE );
    parentLayout.addComponent(layout);
    parentLayout.setComponentAlignment(layout, Alignment.TOP_CENTER);

    Embedded image = new Embedded("", new ClassResource("Icon_25x32.png"));
    layout.addComponent(image, 2, 0);
    layout.setComponentAlignment(image, Alignment.TOP_CENTER);

    Label titleLabel = new Label("YT-100 ATU Control Center");
    titleLabel.addStyleName("v-label-largeTitleText");
    //layout.addComponent(titleLabel, 3, 1);
    layout.addComponent(titleLabel, 3, 1, 4,1);
    layout.setComponentAlignment(titleLabel, Alignment.TOP_CENTER);

    mUserLayout = new GridLayout(2, 2);
    mUserLayout.setSpacing(true);
    layout.addComponent(mUserLayout, 5, 0);
    layout.setComponentAlignment(mUserLayout, Alignment.MIDDLE_CENTER);
}

why does this not center?

Answer 1

Fixed:

 titleLabel.setSizeUndefined();

and

 .v-caption-centered, input.centered {
 text-align: center;
 }

notice that title label has 100% width by default, so it will take the entire width of the containing layout cell. Centering is only meaningful for components that take less width than the containing cell. Hence, you'd need to set the label width to undefined.