3

我有一个角度应用程序，我使用清晰度而不是引导程序，

我有一个数据网格，想知道如何将数据网格的标题文本与中心对齐我尝试过内联样式的 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;
}

提前致谢

4

2 回答 2

0

您可以定位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

于 2019-10-03T10:31:19.653 回答
0

利用

<clr-dg-cell class="clr-justify-content-center">

或者

:host ::ng-deep {
  .datagrid-table .datagrid-column {
    justify-content: center;
  }
}

https://github.com/vmware/clarity/blob/3281f777e84b7efce3e7697e82f6c85df802b3b5/apps/website/data/angular-api.json#L1802

于 2021-10-13T22:28:04.000 回答