Center Text In A Wizard H1 Tag

Question

this should be straightforward, but I am missing it. I am attempting to center the text in my wizard h1 tag, by using this css in my stylesheet.css

.h1textalign { text-align:center; }

And I am attempting to apply this class like so:

<asp:Wizard ID="FirstwzSetup" runat="server" CssClass="wizpad" Font-Names="Tahoma" Font-Size="20px" Style="width: 100%; overflow: scroll;" ActiveStepIndex="0">
    <WizardSteps>
        <asp:WizardStep runat="server" StepType="Start" title="Sponsor Recognition">
           <h1 id="h1test" runat="server" class="h1textalign">Test To Center Text</h1>
        </asp:WizardStep>
    </WizardSteps>
</asp:Wizard>

What is stopping the css class from being applied to the h1 tag?

EDIT
This is a fiddle with an example - my text is not being centered

https://jsfiddle.net/8e8yo28q/

Answer 1

Since header is a block element, you may need to give it a width as well. Also, you can apply the important tag to ensure no other css settings are causing your issue.

    h1 {width: 100%; text-align:center !important;}

Answer 2

Just add width:100% to your h1 tag

Try adding border:1px solid black , to your previous css, and you will notice that your h1 is restricted to certain width.

If you add % width to it, ie 100% , it will take the relative width of the parent.

And your text in h1 will center itself.

Working Fiddle