Headerstyle-horizontalalign is not working

Question

ItemStyle-HorizontalAlign="Center" is working fine for data cell column, but HeaderStyle-HorizontalAlign="Center" is not working for header of the GridView.

Why? How to resolve?

Answer 1

The GridView headers are <th> elements. By default these are centered and bold. So if you use a bootstrapper, pre-build skin etc, those usually set the text alignment of table headers to the left.

Now when you add HeaderStyle-HorizontalAlign="Center", aspnet adds align="center" to the header row <tr>. But the subsequent <th> nodes have their alignment overwritten by the CSS.

What you can do is add a class to the header and overwrite the text alignment.

HeaderStyle-CssClass="centerHeaderText"

<style>
    .centerHeaderText th {
        text-align: center;
    }
</style>

If you use bootstrap you can simply use the class text-center

HeaderStyle-CssClass="text-center"

Answer 2

If you are using a bootstrap website, HeaderStyle-HorizontalAlign="Center" does not work.

The below code can be the solution:

HeaderStyle-CssClass="text-right"