如何在 HorizontalLayout 中调整 Vaadin 组件的垂直对齐方式？答案

【问题标题】：How adjust the Vaadin components' vertical alignment in a HorizontalLayout?如何在 HorizontalLayout 中调整 Vaadin 组件的垂直对齐方式？
【发布时间】：2021-05-08 06:18:03
【问题描述】：

我想将按钮与文本字段对齐在同一行。项目对齐已设置为Alignment.CENTER，但从图像中可以看出，由于顶部的标签，TextFields 的垂直中心较低。

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

【问题讨论】：

标签： vaadin vaadin-flow

【解决方案1】：

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 了解更多信息。

【讨论】：

【解决方案2】：

试试...

horizontalLayout.setAlignItems(FlexComponent.Alignment.BASELINE);

【讨论】：