css - 如何对齐清晰度数据网格中的文本

Question

我有一个 Angular 应用程序，我使用清晰度而不是 Bootstrap ，

我有一个数据网格，想知道如何将数据网格的标题文本与中心对齐我已经尝试过内联样式 CSS，但似乎不起作用。

代码示例html文件

<clr-datagrid>
    <clr-dg-column class="align-content">User ID</clr-dg-column>
    <clr-dg-column class="align-content">Name</clr-dg-column>
    <clr-dg-column class="align-content">Creation date</clr-dg-column>
    <clr-dg-column class="align-content">Favorite color</clr-dg-column>

    <clr-dg-row >
        <clr-dg-cell>data</clr-dg-cell>
        <clr-dg-cell>data</clr-dg-cell>
        <clr-dg-cell>data</clr-dg-cell>
        <clr-dg-cell>data</clr-dg-cell>
    </clr-dg-row>
        <clr-dg-row >
        <clr-dg-cell>data</clr-dg-cell>
        <clr-dg-cell>data</clr-dg-cell>
        <clr-dg-cell>data</clr-dg-cell>
        <clr-dg-cell>data</clr-dg-cell>
    </clr-dg-row>
        <clr-dg-row >
        <clr-dg-cell>data</clr-dg-cell>
        <clr-dg-cell>data</clr-dg-cell>
        <clr-dg-cell>data</clr-dg-cell>
        <clr-dg-cell>data</clr-dg-cell>
    </clr-dg-row>

    <clr-dg-footer></clr-dg-footer>
</clr-datagrid>

CSS文件

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

提前致谢

Answer 1

您可以定位 datagrid-column-title 类，并可以为其赋予如下样式:

.datagrid-column-title{
  display: flex;
  justify-content: center;
}

此外，如果您希望数据行也同时居中，请尝试以下操作:

.datagrid-table .datagrid-cell{
  display: flex;
  justify-content: center;
}

确保在应用程序的 style.scss 中进行这些更改。

这是一个工作演示:https://stackblitz.com/edit/angular-tt3md6