文章/答案/技术大牛

发布

社区首页 >问答首页 >如何让单元格中的内容垂直居中？

问如何让单元格中的内容垂直居中？
EN

Stack Overflow用户

提问于 2020-09-25 13:04:04

回答 1查看 208关注 0票数 1

我正在尝试通过设置gridOptions.rowHeight来降低ag-grid的行高。虽然这确实会降低行的高度，但内容不会在行中垂直居中。做这件事最好的方法是什么？

我还尝试更改主题的grid-size参数，但遇到了同样的问题。

这是没有任何gridOptions的网格。我测量的行高是42px (尽管文档上说应该是25px)。

下面是我将行高减少到36px (gridOptions={{ rowHeight: 36 }})时得到的结果：

请注意，内容不再垂直居中。

当我将行大小增加到100px时，这一点变得更加明显。内容显然没有居中。

css

reactjs

ag-grid

ag-grid-react

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-25 13:57:48

单元格内容只能使用css垂直对齐。

.ag-cell {
  display: flex;
  align-items: center;
}

还可以在列定义中添加内联样式。

<AgGridReact
  rowHeight={50}
  defaultColDef={{
    cellStyle: (params) => ({
      display: "flex",
      alignItems: "center"
    })
  }}
  {...}
/>

实时演示

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64058096

复制

相似问题

问如何让单元格中的内容垂直居中？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让单元格中的内容垂直居中？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让单元格中的内容垂直居中？
EN