java - Vaadin:组件未居中

Question

我希望注册表单位于页面中央，并尝试使用与此 tutorial 相同的代码，但似乎不起作用。

import com.example.tvseriestrackingwebapp.backend.service.UserService;
import com.example.tvseriestrackingwebapp.ui.components.SignUpForm;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.HighlightConditions;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouterLink;

@Route(value = "registration")
public class SignUpView extends VerticalLayout {


    private UserService userService;

    private final SignUpForm signUpForm = new SignUpForm();

    public SignUpView(UserService userService) {
        //signUpForm.addListener(SignUpForm.SignUpEvent.class, this::saveUser);
        setJustifyContentMode(JustifyContentMode.CENTER);
        setSizeFull();
        setAlignItems(Alignment.CENTER);
        add(new H1("TV Series Tracking Web App"), signUpForm);
    }

    private void saveUser(SignUpForm.SignUpEvent event) {
        userService.save(event.getUser());
        System.out.println("Saved user");
    }


}

编辑我的观点目前看起来像这样

我希望它看起来像这样。

Answer 1

我相信您的 signUpForm 的宽度是 100%。

将表单的宽度设置为所需的值，假设从 500px 开始。只要元素的宽度为 100%，就不会应用任何 justify-content，因为没有额外的空间。

signUpForm.setWidth("500px");