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

Question

我试着让Icon和Label排成一行，但是icon有点高了。

这是我的尝试：

  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);

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

Vaadin Icon and Label not in one Row using Horizontal Layout

java

vaadin