css - 样式适用于 Firefox 和 IE8，但不适用于 Chrome(居中 vs text-align=left)

Question

我有一个包含多个标签和文本框的表单。

此表单在页面中居中，并且每个标签都文本对齐到>左。它在 firefox、jsbin、jsfiddle 上按预期工作，但在 chrome 上不工作。我做错了什么导致它不能在 chrome 上运行？

下面是asp.net代码

<asp:Panel ID="PNL_Order" runat="server" HorizontalAlign="Center" Visible="False">
    <h1>Contact Details</h1>
    <asp:Label ID="label001" runat="server" Text="Name (First/Last)&lt;span style='color: red;'&gt;*&lt;/span&gt;" CssClass="labels"></asp:Label>
    <asp:TextBox ID="TXT_Name" runat="server" TabIndex="1" type="text" Width="150px" />
    <br />
    <!-- Removed other textboxes for clarity and readability -->
    <asp:Button ID="BT_confirmOrder" runat="server" TabIndex="5" Text="Confirm and send Query" Width="158px" />
</asp:Panel>

这是链接到它的 CSS:

.labels
{
    width: 175px;
    text-align: left;
    display: inline-block;
}

在 Firefox 中它按预期显示:

Chrome 没有按预期显示:

甚至 IE8 也能正确解释它:

脚注

我还想补充一点，在 Firefox 上标签是 175 像素宽，而在 Chrome 上标签是 125 像素宽，它也不遵循指定的宽度。

Answer 1

尝试在包含标签和文本框的面板内添加一个 div 容器:

<asp:Panel ID="PNL_Order" runat="server" Visible="False">
    <h1>Contact Details</h1>
<div style="text-align: center;">
    <asp:Label ID="label001" runat="server" Text="Name (First/Last)&lt;span style='color: red;'&gt;*&lt;/span&gt;" CssClass="labels"></asp:Label>
    <asp:TextBox ID="TXT_Name" runat="server" TabIndex="1" type="text" Width="150px" />
    <br />
    <!-- Removed other textboxes for clarity and readability -->
    <asp:Button ID="BT_confirmOrder" runat="server" TabIndex="5" Text="Confirm and send Query" Width="158px" />
</div>
</asp:Panel>