How to center align the header text of a TemplateField?

Question

I've a GridView with TemplateFields.

I have tried HeaderStyle-HorizontalAlign="Center" to align the header text of the TemplateField to center but it's not working.

<asp:TemplateField HeaderText="Events" HeaderStyle-HorizontalAlign="Center" 
    ItemStyle-HorizontalAlign="Center">
</asp:TemplateField>

How I can align center the header text of a TemplateField?

While ItemStyle-HorizontalAlign="Center" aligning center the items of TemplateField is working correctly.

Answer 1

The <center> tag is deprecated in HTML 4.01 and not supported in HTML5 - the working code you posted could be "CSS-ified" as follows:

<asp:TemplateField ItemStyle-HorizontalAlign="Center">
    <HeaderTemplate>
        <asp:Panel style="margin-left: auto; margin-right: auto; text-align: center;">
            Events
        <asp:Panel>
    </HeaderTemplate>
<asp:TemplateField>

(Note: Panel is the ASP.Net equivalent of a <div>.)

A slight improvement here is to define a CSS class for the style so it can be reused elsewhere:

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

...and reference it from the panel instead of using the inline style:

<asp:Panel CssClass="center">

Answer 2

By right, temStyle-HorizontalAlign="Center" should be working. Just be aware that your gridview styles are inherited from parent stylesheet. Meaning, your gridview has at least one parent style which is not certer align. That should be where your problem comes.