css - 如何在Vaadin7中使组件与CSSLayout水平对齐？

我需要使用CssLayout。我有几个组成部分。无论我做什么，我都找不到找到使这些组件正确对齐的方法。

在我的主题中，我使用了以下代码：align-content: flex-end;
              或这个

justify-content: flex-end;

等等。没有结果。如果有人使用CSSLayout，是否可以在Vaadin7中对齐组件？

private Component addUpperStripe() {
    CssLayout cssLayout = new CssLayout();
    cssLayout.setWidth("100%");
    cssLayout.setStyleName("stripestyle");

    Label userNameLabel = new Label("User:" + currentUserName);
    userNameLabel.setSizeUndefined();
    cssLayout.addComponent(userNameLabel);
    userNameLabel.setStyleName("leftPosition");

    Label dateLabel = new Label(new Date().toString());
    dateLabel.setSizeUndefined();
    cssLayout.addComponent(dateLabel);
    dateLabel.setStyleName("centerPosition");

    Label versionLabel = new Label("Version:" + versionString);
    versionLabel.setSizeUndefined();
    cssLayout.addComponent(versionLabel);
    versionLabel.setStyleName("rightPosition");

    return cssLayout;
}




 .stripestyle {
       background-color: #336699;
       line-height: 36px;
       vertical-align: bottom;
       align-content: space-between;
    }




  .rightPosition {
     ? WHAT TO WRITE HERE??????????????????
   }

   .leftPosition {
   }

   .centerPosition {
   }

最佳答案

使用float和text-align属性在CssLayout中对齐组件。
SSCCE：

@Override
protected void init(VaadinRequest request) {
    setContent(addUpperStripe());
}

private Component addUpperStripe() {
    CssLayout cssLayout = new CssLayout();
    cssLayout.setWidth("100%");
    cssLayout.setStyleName("csslayout");

    Label userNameLabel = new Label("LEFT");
    userNameLabel.setSizeUndefined();
    cssLayout.addComponent(userNameLabel);
    userNameLabel.setStyleName("leftPosition");

    Label dateLabel = new Label("MID");
    dateLabel.setSizeUndefined();
    cssLayout.addComponent(dateLabel);

    Label versionLabel = new Label("RIGHT");
    versionLabel.setSizeUndefined();
    cssLayout.addComponent(versionLabel);
    versionLabel.setStyleName("rightPosition");

    return cssLayout;
}

和styles.scss：

  .csslayout{
    text-align: center;
  }
  .leftPosition{
    float: left;
  }
  .rightPosition{
    float: right;
  }

关于css - 如何在Vaadin7中使组件与CSSLayout水平对齐？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30212817/