如何在 Horizo​​ntalLayout 中调整 Vaadin 组件的垂直对齐方式？

Question

我想将按钮与文本字段对齐在同一行。项目对齐已设置为 Alignment.CENTER，但正如您从图像中看到的那样，文本字段的垂直中心由于其顶部的标签而较低。

    HorizontalLayout horizontalLayout = new HorizontalLayout();
    horizontalLayout.setAlignItems(FlexComponent.Alignment.CENTER);
    Div div = new Div(buttonAddPriceRange);
    horizontalLayout.add(spanneVon, spanneBis, div);

Answer 1

尝试...

horizontalLayout.setAlignItems(FlexComponent.Alignment.BASELINE);

Answer 2

layout.setAlignItems(Alignment.BASELINE); 允许您按基线对齐项目，即底部。

HorizontalLayout hl = new HorizontalLayout(new TextField("hello"),
    new Button("world"));
hl.setAlignItems(Alignment.BASELINE);
add(hl);

观看精彩视频 Master Vaadin VerticalLayout and HorizontalLayout - layouts in Vaadin Flow 了解更多信息。