Angular ui-grid - CSS 将列中的文本居中，以便两行居中

Question

如何配置 Angular UI-grid 使列居中，使两条线居中？

我在 grid.columnDefs 中这样定义 headerCellClass: text-c 和 width: 98：

{
     name: 'TotalOutstanding',
     displayName: 'Total Outstanding',
     width: 98,
     type: 'number',
     cellClass: 'text-c',
     headerCellClass: 'text-c'
}

和 text-c 在 css 文件中是这样的：

.text-c {
    text-align: center;
}

但是我在附件中得到了结果。

我真的需要两个词都居中。我该怎么做？

Answer 1

似乎 class .ui-grid-cell-contents 设置了 white-space: nowrap;
如果您将其更改为正常，它将起作用，因此您的 css 应该如下所示：

.text-c .ui-grid-cell-contents {
  text-align: center;
  white-space: normal;
}

根据您的设置 (cellClass: 'text-c', headerCellClass: 'text-c')，此 css 将影响 header 以及单元格..

--- 编辑 ---
根据 OP 的评论，原来的答案对他不起作用，我添加了一条对他有帮助的评论。我将该评论添加到下面的答案中：

我认为排序图标位置对您有影响。
我从 UI-Grid 的教程 (Tutorial: 115 HeaderCellClass) 中获取了 Plunker，并对其进行了编辑以适合您的场景。
我使用 header 单元格 class ui-grid-header-cell-label 将显示更改为 inline-block 因此它将 "push" 排序图标移至下一行：plunker here

Angular ui-grid - CSS 将列中的文本居中，以便两行居中

Angular ui-grid - CSS to center the text in the columns so both lines are centered

css

angular-ui-grid

ui-grid