how to make heading title into the center in asp:GridView

Question

Does anyone know how can I center a title to the center in asp:GridView?

Example:

and my code as below:

<table border="0" width="500">
<tr>
    <td width="450px" align="center">
            <asp:GridView ID="grid" runat="server" AutoGenerateColumns="False"
              DataSourceID="dsTest" DataKeyNames="id"
              CellPadding="6" GridLines="None" AllowPaging="True" PageSize="20" AllowSorting="True" Width="450px">
              <Columns>
                <asp:TemplateField HeaderText="   Address" SortExpression="suburb, street">
                  <ItemTemplate>
                        <a style='cursor:pointer'  href='#'>
                     <%# Eval("unit_number") %> <%# Eval("level_number") %> <%# Eval("street_number") %> <%# Eval("street") %>
                     <%# Eval("suburb") %> <%# Eval("postcode") %></a>
                  </ItemTemplate>
                </asp:TemplateField>
              </Columns>
</asp:GridView>
</td>
</tr>
</table>

Does anyone know how can I make the 'Address' to the center instead? I have tried to set a text-align:"center" in css for GridView, but it's doesn't seem working for me

Also... if I like to more all display address to the left, does anyone know how can I do it?

Answer 1

Actually it's HeaderStyle-HorizontalAlign

<asp:TemplateField HeaderText="Address" SortExpression="suburb, street" HeaderStyle-HorizontalAlign="Center">

Answer 2

If you are using Visual Studio 2015 and creating a “Web Application” as I did. None of these options work. Mostly because the above commands are being over-ridden by a call-out in the Bootstrap.css file. How to fix this - After inserting the table on the web page you need to open Bootstrap.css under the Content folder in Solution explorer. I did a search for “Table” and found that at line 1419, there were two “Table” styles called out that surrounded a “th” style. "th" being the "Table Header". It was set by default to “text-align: left;”. Simply change "left" to “center” and all works fine. Below is a snippet from the default Bootstrap.css file that I found and altered. On mine it started at line 1413 and ended on line 1426.

table {
  max-width: 100%;
  background-color: transparent;
  text-align:center;
}
th {
  text-align: center;
}

.table {
  width: 100%;
  margin-bottom: 20px;
} 

Hope this helps.