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

Posted 2023-03-05

【中文标题】如何垂直对齐 Vaadin 网格中单元格的内容？

【英文标题】：How can I vertically align the contents of a cell in a Vaadin Grid?

【发布时间】：2018-07-09 20:40:31

【问题描述】：

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

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

它使它看起来像这样。

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

【参考方案1】：

我使用 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% 高度，并且其子组件与中间中心对齐。

【参考方案2】：

如果您要在行上设置特定的高度，那么使用 CSS 就很容易实现。

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

Java：

addStyleName("my-custom-grid");

CSS：

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