Alignment help

I trying to get image and tile 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?

Tile? I assume you mean title? For one thing, 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
width than the containing cell. Hence, you’d need to set the label width to undefined.

Alternatively, you could set the label’s text alignment in CSS (“text-align: center”), in which case the text will be aligned within the component’s element.

It might be good to set the size of the image explicitly (why not use Image component?).