在向导 H1 标记中居中文本答案

【问题标题】：Center Text In A Wizard H1 Tag在向导 H1 标记中居中文本
【发布时间】：2018-01-31 03:21:44
【问题描述】：

这应该很简单，但我错过了。我试图通过在我的 stylesheet.css 中使用这个 css 来使我的向导 h1 标记中的文本居中

.h1textalign { text-align:center; }

我正在尝试像这样应用这个类：

<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>

是什么阻止了 css 类应用于 h1 标签？

编辑
这是一个例子 - 我的文字没有居中

https://jsfiddle.net/8e8yo28q/

【问题讨论】：

h1 自然是块级元素，因此应该可以工作。是否有其他 css 被应用到它上面来阻止text-align: center;？例如，如果由于某种未知原因应用了display: inline-block;，则它不会居中。
您的文本在 h1 中居中。 h1 为 200px 宽。如果你想居中 h1 本身，你可以使用margin: 0 auto;

标签： html css asp.net text-align

【解决方案1】：

由于标题是块元素，您可能还需要给它一个宽度。此外，您可以应用重要标签以确保没有其他 css 设置导致您的问题。

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

【讨论】：

是的！对不起。宽度应该是 100% 而不是 200px

【解决方案2】：

只需将width:100% 添加到您的h1 标签

尝试将border:1px solid black, 添加到您之前的css，您会注意到您的h1 被限制为特定宽度。

如果你给它加上%宽度，即100%，它会取父元素的相对宽度。

您在h1 中的文本将自行居中。

Working Fiddle

【讨论】：