How do you center align the text of the column headings for a lightning:datatable?

Question

I'm able to apply color or make the column heading text bold, but I can't center align the text for some reason.

<lightning:datatable data="{! v.data }"
        columns="{! v.columns }"
        keyField="id"
        resizeColumnDisabled="true"
        hideCheckboxColumn="true"/>

---

.THIS table thead th {
   color: red;
   font-weight:bold;
}

Putting text-align: center in the css doesn't seem to have any effect on the column text. Even directly altering the div surrounding the lightning:datatable with a style tag doesn't work.

Any help would be great.

Answer 1

I just add css that below this and worked.

for column .THIS .slds-th__action{ justify-content: center !important; }

for body .THIS .slds-grid_align-end { justify-content: center !important; }

Answer 2

you can try this code :

<div  class="myUniqueTable">
    <lightning:datatable aura:id="accountContacts-list"
                         data="{!v.data}"
                         columns="{!v.columns}"
                         keyField="id"
                         maxRowSelection="1"
                         selectedRows="{!v.selectedIds}" />
</div>

and in css add this:

.THIS .myUniqueTable th {
    text-align: center !important;
}