java - 使用水平布局的 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 包含在 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);