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

修正：

 titleLabel.setSizeUndefined();

和

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

请注意，标题标签默认为100％宽度，因此它将占用包含布局单元格的整个宽度。对中仅对宽度小于包含单元格的组件有意义。因此，您需要将标签宽度设置为undefined。

Vaadin Alignment with GridLayout to center over cells

1 个答案: