title: Styling working on Firefox AND IE8 but NOT on Chrome (Centered vs text-align=left)
body: <p>I have a form which holds multible labels and textboxes.</p>
  
  <p>This <strong>form</strong> is <strong>centered</strong> in the page, and each <strong>labels</strong> are <strong>text-aligned</strong> to the <strong>left</strong>. It works as intended on <strong>firefox</strong>, jsbin, jsfiddle, but <strong>not on chrome</strong>. What am I doing wrong for it to not work on chrome?</p>
  
  <p>Follows is the asp.net code</p>
  
  <pre><code>&lt;asp:Panel ID="PNL_Order" runat="server" HorizontalAlign="Center" Visible="False"&gt;
      &lt;h1&gt;Contact Details&lt;/h1&gt;
      &lt;asp:Label ID="label001" runat="server" Text="Name (First/Last)&amp;lt;span style='color: red;'&amp;gt;*&amp;lt;/span&amp;gt;" CssClass="labels"&gt;&lt;/asp:Label&gt;
      &lt;asp:TextBox ID="TXT_Name" runat="server" TabIndex="1" type="text" Width="150px" /&gt;
      &lt;br /&gt;
      &lt;!-- Removed other textboxes for clarity and readability --&gt;
      &lt;asp:Button ID="BT_confirmOrder" runat="server" TabIndex="5" Text="Confirm and send Query" Width="158px" /&gt;
  &lt;/asp:Panel&gt;
  </code></pre>
  
  <p>And here is the CSS linked to it:</p>
  
  <pre class="lang-css prettyprint-override"><code>.labels
  {
      width: 175px;
      text-align: left;
      display: inline-block;
  }
  </code></pre>
  
  <p>In Firefox it displays as intended :</p>
  
  <p><img src="https://i.stack.imgur.com/1AVMB.jpg" alt="Firefox styling working as intended"></p>
  
  <p>And Chrome not displaying as intended :</p>
  
  <p><img src="https://i.stack.imgur.com/imZRj.jpg" alt="Chrome styling not working as intended"></p>
  
  <p>Even IE8 interprets it properly:</p>
  
  <p><img src="https://i.stack.imgur.com/vKAyC.jpg" alt="IE8 styling"></p>
  
  <h3>Footnote</h3>
  
  <p>I want to add also that on Firefox the labels are 175 pixels wide, while on Chrome they are 125 pixels wide, it doesn't follow the width specified either.</p>