Search code examples
htmlcssasp.nettext-align

Center Text In A Wizard H1 Tag

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/

Solution

  • 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;}