使用水平布局的 Vaadin 图标和标签不在一行中

Question

我尝试将图标和标签放在一行中，但图标高一点。

这是我的尝试：

  private VerticalLayout createActiveProductsCard() {
    VerticalLayout layout = new VerticalLayout();
    layout.setWidth("50px");
    layout.setHeight("150px");
    layout.getStyle().set("margin-bottom","20px");
    layout.getStyle().set("border", "0.5px solid #9E9E9E");

    Icon icon = new Icon(VaadinIcon.BARCODE);
    icon.setSize("20px");
    Label title = new Label("Produkte");
    title.getStyle().set("font-size","20px");
    HorizontalLayout horizontalLayout = new HorizontalLayout(icon, title);
    horizontalLayout.setVerticalComponentAlignment(Alignment.AUTO);
    layout.add(horizontalLayout);
    return layout;
}

但它不起作用，有人有解决方案吗？

Answer 1

使用Alignment.CENTER代替Alignment.AUTO，并将 括Label在 a 中Div。下面是一个例子：

Icon icon = new Icon(VaadinIcon.BARCODE);
icon.setSize("20px");
Div title = new Div(new Label("Produkte"));
title.getStyle().set("font-size","20px");
HorizontalLayout horizontalLayout = new HorizontalLayout(icon, title);
horizontalLayout.setAlignItems(Alignment.CENTER);
layout.add(horizontalLayout);