Vaadin 与 GridLayout 对齐以在单元格上居中

Question

我试图让图片和标题居中

框内登录正常

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);
}

为什么不居中？

Answer 1

固定：

 titleLabel.setSizeUndefined();

和

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

请注意，默认情况下标题标签的宽度为 100%，因此它将占据包含布局单元格的整个宽度。居中仅对宽度小于包含单元格的组件有意义。因此，您需要将标签宽度设置为未定义。

Vaadin 与 GridLayout 对齐以在单元格上居中

Vaadin Alignment with GridLayout to center over cells

vaadin

vaadin7