Vaadin Label alignment

Question

I've got a FormLayout which I'm injecting to VerticalSplit Panel and I can't center the "TOMCAR" text. I've tried setting UndefinedSize and centering with HTML but no luck with that.

My code:

HorizontalSplitPanel panel = new HorizontalSplitPanel();
    VerticalSplitPanel vpanel = new VerticalSplitPanel();
    FormLayout leftLayout = new FormLayout();
    FormLayout rightLayout = new FormLayout();

    Label enter = new Label();
    enter.setContentMode(ContentMode.HTML);
    enter.setValue("<br></br>");

    panel.setWidth(Page.getCurrent().getBrowserWindowWidth(), Sizeable.Unit.PIXELS);
    panel.setSplitPosition((Page.getCurrent().getBrowserWindowWidth()) / 8, Sizeable.Unit.PIXELS);
    panel.setLocked(true);
    panel.setHeight(Page.getCurrent().getBrowserWindowHeight(), Sizeable.Unit.PIXELS);

    viewBZ.setWidth("70%");
    leftLayout.addComponent(viewBZ);
    leftLayout.addComponent(configureAccount);

    for (int i = 0; i < 5; i++) {
        leftLayout.addComponent(enter);
    }

    leftLayout.addComponent(adminContact);

    for (int i = 0; i < 10; i++) {
        leftLayout.addComponent(enter);
    }
    leftLayout.addComponent(logout);

    panel.addComponent(leftLayout);

    content.addValueChangeListener(content);

    vpanel.setHeight((Page.getCurrent().getBrowserWindowHeight()) / 8, Sizeable.Unit.PIXELS);
    vpanel.setWidth((Page.getCurrent().getBrowserWindowWidth()) - (Page.getCurrent().getBrowserWindowWidth() / 8) - 8, Sizeable.Unit.PIXELS);
    vpanel.setLocked(true);

    Label label = new Label();   
    label.setWidth(null);


    label.setValue("<center>TOMCAR</center>");

    rightLayout.setMargin(false);
    rightLayout.setWidth(vpanel.getWidth() - panel.getWidth(), Sizeable.Unit.PIXELS);
    rightLayout.setHeight((Page.getCurrent().getBrowserWindowHeight()) / 100, Sizeable.Unit.PIXELS);


    rightLayout.addComponent(label);
    rightLayout.setExpandRatio(label, 1.0f);
    rightLayout.setComponentAlignment(label, Alignment.MIDDLE_RIGHT);

    vpanel.addComponent(rightLayout);

    vpanel.addComponent(content);
    panel.addComponent(vpanel);

    CssLayout css = new CssLayout(panel);

    setCompositionRoot(css);

Second thing is not a priority but is these enters are proper solution to set the button downwards ? Maybe there is another way to do this?

Thanks :)

Answer 1

You can use css to align center.

use label.setStyleName("center"):

// add this in your scss
.center {
    text-align: center;
}