Как выровнять текст в сетке четкости - PullRequest
Новая
       13

Как выровнять текст в сетке четкости

2 голосов
/ 03 октября 2019

У меня есть угловое приложение, и я использую ясность вместо начальной загрузки,

У меня есть сетка данных, и я хотел бы знать, как вы можете выровнять текст заголовка сетки данных по центру, который я пробовал встроить в стиль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;
}

заранее спасибо

1 Ответ

0 голосов
/ 03 октября 2019

Вы можете выбрать класс 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

...