时间戳

首页 > 解决方案 > Angular ui-grid - CSS 使列中的文本居中，因此两条线都居中

css - Angular ui-grid - CSS 使列中的文本居中，因此两条线都居中

问题描述

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

我像这样定义headerCellClass: text-cand width: 98：grid.columnDefs

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

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

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

但我得到了附加图像的结果。

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

在此处输入图像描述

标签： cssangular-ui-gridui-grid

解决方案

似乎该类.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 将影响标题以及单元格..

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

我认为排序图标位置正在影响您。
我从 UI-Grid 的教程（教程：115 HeaderCellClass）中获取了 Plunker，并对其进行了编辑以适合您的场景。
我使用标题单元格类ui-grid-header-cell-label将显示更改为，inline-block以便它将排序图标“推”到下一行：plunker here

推荐阅读