如何垂直对齐瓦丁网格中单元格的内容？

Question

我有以下代码，成功地将单元格的内容集中在我的Vaadin网格中。

        this.grid.setRowHeight(65);
        this.grid.setStyleGenerator(item -> "v-align-center");

它让它看起来像这样。

如何实现垂直居中？当我尝试添加样式名称 v-对齐中间时，它什么也没做。

Answer 1

我玩过CSS样式和默认的文本呈现器，但没有让它工作。当您切换到 HtmlRenderer 时，您就有更多的样式选项，其中包含其他 div HTML 元素。有关样式提示，请参阅此问题。例如，当您可以使用弹性布局时，这应该有效：

<div style="display:flex; height:100%; width:100%">
    <div style="margin: auto;">11 m³</div>
</div>

另一种解决方法是使用ComponentRenader列，其中HorizontalLayout设置为100%高度，其子组件与中间对齐。

Answer 2

如果你要设置行的特定高度，那么用CSS来实现就非常简单了。

我没有使用StyleGenerator，而是将一个CSS类应用于网格本身。

Java：

addStyleName("my-custom-grid");

CSS（客服代表）：

.my-custom-grid .v-grid-body .v-grid-row .v-grid-cell {
    height: 65px;
    line-height: 65px;
}