如何在 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

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

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

查看精彩视频Master Vaadin VerticalLayout 和 Horizo​​ntalLayout - Vaadin Flow 中的布局以了解更多信息。