如何在Vaadin网格中垂直对齐单元格的内容？

Question

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

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

它看起来像这样。

我怎样才能垂直居中？当我尝试添加样式名称v-align-middle时，它什么也没做。

Answer 1

如果你在行上设置一个特定的高度，那么用CSS实现它是非常直接的。

我不是使用StyleGenerator，而是将CSS类应用于网格本身。

<强>爪哇：

addStyleName("my-custom-grid");

<强> CSS：

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

Answer 2

我使用CSS样式和默认TextRenderer，但没有让它工作。当您切换到HtmlRenderer时，您会有更多样式选项以及其他div HTML元素。有关样式提示，请参阅this question。例如，当您可以使用flex布局时，这应该可以使用：

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

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