Positioning your components central on the browser

Hi guys,

this should probably be an easier question for the folks with more experience :-).

I'm currently trying to get my components somehow centered in my application and found nothing understandable during my ongoing research yet.

So that for example this code gets its components centered, and not on the left side.

private VerticalLayout buildLoginView() {
		loginLayout = new VerticalLayout();
		
		// infoLabel
		infoLabel = new Label();
		infoLabel.setValue("info");
		loginLayout.addComponent(infoLabel);
		
		// loginForm
		loginForm = new LoginForm();
		loginForm.setStyleName("v-loginform");
		loginLayout.addComponent(loginForm);
		
		// registerButton
		registerButton = new Button();
		registerButton.setCaption("Register");
		loginLayout.addComponent(registerButton);
		
		return loginLayout;
	}

I've removed the listeners for achieving a better readability here.

I have tried adding

loginLayout.setComponentAlignment(infoLabel, Alignment.TOP_CENTER);
		loginLayout.setComponentAlignment(loginForm, Alignment.MIDDLE_CENTER);

before retunring the loginLayout, but it did not work :-(.

So if anyone of you could help me, I'd be very happy and thankful.

I dont know yet how it works with this .css-files that can be added, so if we could find a java-solution, it'd be great

Thanks a lot!

You will need to add infoLabel.setSizeUndefined() because by default labels are using 100% of the width.
You may have to do it for the login form, I am not sure.
You don't have to do it for button.

Finally, loginLayout need to be set to use all the width (otherwise it will just scale until the biggest component fits inside) with loginLayout.setSizeFull()

Depending on what you do to loginLayout, you may have to apply setSizeFull to it's parent.

To help with this kind of problem, you can add ?debug to the URL and then click on "AL" or "Analyse Layout" in the small debug window, it will display all layouts problems in the current page so you can fix them quickly.