Search code examples
cssangularsassvmware-clarity

Center content in clarity datagrid cell


I have a simple clarity datagrid with icons.

<clr-datagrid>
    <clr-dg-column>Severity</clr-dg-column>
    <clr-dg-row *clrDgItems="let alert of alerts; let i = index [clrDgItem]="item">
           <clr-dg-cell>
              <clr-icon id="severity-error" shape="minus-circle" class="is-solid"></clr-icon>
           </clr-dg-cell>
    </clr-dg-row>
</clr-datagrid>

enter image description here

How can I centered the icons in cells?


Solution

  • You need add style in <clr-dg-cell> cell tag.

    <clr-dg-cell style="text-align: center;">
        <clr-icon id="severity-error" shape="minus-circle" class="is-solid"></clr-icon>
    </clr-dg-cell>