javascript 如何将 AG 网格控件的标题中的文本居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46490177/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I center the text in the headers for an AG-grid control?
提问by user7400346
How can I center the text in the headers for an AG-grid control? I have tried using cellstyle and cellclass in the column definition but that did not work. Thank you
如何将 AG 网格控件的标题中的文本居中？我曾尝试在列定义中使用 cellstyle 和 cellclass，但这没有用。谢谢
回答by Alex Wachira
I'm using react and I just added the following snippet to my Table component's .css
我正在使用 react，我只是将以下代码段添加到我的 Table 组件的 .css
.ag-header-cell-label {
justify-content: center;
}
I'm overriding the .cssclass class from ag-gridwhich I found via devtools inspection, and discovered it's using flexbox for display.
我覆盖了我通过 devtools 检查发现的.css类ag-grid，并发现它使用 flexbox 进行显示。
See example (not react but same concept): https://embed.plnkr.co/O3NI4WgHxkFiJCyacn0r/
参见示例（不是反应而是相同的概念）：https: //embed.plnkr.co/O3NI4WgHxkFiJCyacn0r/
回答by Maharramoff
You may use this property:
您可以使用此属性：
cellStyle: {textAlign: 'center'}
回答by ZooZ
Assign a class to the cell as below:
为单元格分配一个类，如下所示：
gridOptions = {
...
columnDefs: [
...
{ headerName: "field1", field: "field1", cellClass: "grid-cell-centered"}
...
]
}
css file:
css文件：
.grid-cell-centered {
text-align: center;
}
回答by akash mishra
If you want to align your text right, left or center in ag-grid. Then use this:-
如果您想在 ag-grid 中将文本向右、向左或居中对齐。然后使用这个：-
cellStyle: { textAlign: 'right' }
cellStyle: { textAlign: 'left' }
cellStyle: { textAlign: 'center' }
回答by Alex Pandrea
For (independent) customization of each header, you can make a custom header component: https://www.ag-grid.com/javascript-grid-header-rendering/
对于每个标题的（独立）自定义，您可以制作自定义标题组件：https: //www.ag-grid.com/javascript-grid-header-rendering/
回答by PHAM Cong Cuong
It should be:
它应该是：
.ag-header-cell-label {
text-align: center;
}
