How to center align the header text of a TemplateField?

Question

I've a GridView with TemplateField s.

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.

Any help will be really appreciated!

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

I have just created a new WebForms solution and removed bootstrap just to be sure that no css styles interfere with my code. This is what I've done to reproduce your problem.

aspx:

<asp:GridView runat="server" ID="grid" Style="width: 500px;">
    <Columns>
        <asp:TemplateField HeaderText="FirstName - TemplateField">
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Bind("FirstName") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>

</asp:GridView>

As you can see, I have defined one TemplateField without any additional css styles.

CodeBehind:

public partial class _Default : Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        grid.DataSource = GetPersons();
        grid.DataBind();
    }

    public IEnumerable<Person> GetPersons()
    {
        for(int i = 0; i< 10; i++)
        {
            yield return new Person { FirstName = $"John{i}", LastName = "Doe", Age = i };
        }
    }
}

I am just returning 10 dummy items to create a demo grid. Nothing out of the ordinary.

This is the result in Chrome and Internet Explorer:

As you can see, the headers are centered by default. And this is for both -BoundFields and TemaplateFields.

If this is not the case for you, I recommend checking if any other stylesheets are interfering with your styles. I know that bootstrap 3 defaults to text-align: center for th elements (Because I just checked)

Answer 3

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.

Answer 4

I have found a way that solved the problem in which I used a <center> tag in HeaderTemplate:

<asp:TemplateField ItemStyle-HorizontalAlign="Center">
    <HeaderTemplate>
        <center>
            Events
        </center>
    </HeaderTemplate>
<asp:TemplateField>

Answer 5

Try this to center the text in a column:

.centeralign {
   text-align: center;
}

<ItemStyle CssClass="centeralign" />


<asp:TemplateColumn HeaderStyle-VerticalAlign="Top">

                              <HeaderTemplate>
                                 <asp:LinkButton runat="Server" ID="linkbuttonSortType" Text="Type" />
                                 <br>
                                 <asp:DropDownList runat="Server" ID="dropdownlistTypeFilter" AutoPostBack="true"
                                    Style="width: 100%;" OnSelectedIndexChanged="FilterChanged" />
                              </HeaderTemplate>
                              <ItemStyle CssClass="centeralign" />
                              <ItemTemplate>
                                 <asp:Literal runat="server" ID="litType" Text='<%# Eval("call_type").ToString() == "2" ? "Fax" : "Voice" %>' />
                              </ItemTemplate>
                           </asp:TemplateColumn>

Answer 6

<asp:TemplateField >
                            <HeaderTemplate>
                               <label style="text-align:center;display:block;"> Date</label>                                        
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:Label DataField="Created_Date" Style="font-size: medium; font-`enter code here`weight: bold;" ID="Created_Date_Id" runat="server" Text='<%# Bind("Created_Date") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>