title: Aligning labels below text input
body: <p>I am trying to align labels in a form to go below a text input box. I have adapted my CSS from <a href="https://stackoverflow.com/questions/3463621/css-label-text-right-below-input-element">here</a>.</p>
  
  <p>It displays perfectly in IE 9, but I am having trouble with firefox, chrome and others.</p>
  
  <p>Here's what it looks like in IE:</p>
  
  <p><img src="https://i.stack.imgur.com/nMTxf.jpg" alt="IE"></p>
  
  <p>And this is what it looks like in firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/oQOEw.jpg" alt="enter image description here"></p>
  
  <p>It looks much worst in chrome, but I would like to get it working in firefox first.</p>
  
  <p>The main concerns are:</p>
  
  <ul>
  <li>The text input should be centered above the labels.</li>
  <li>The colons should be vertically aligned with the text inputs.</li>
  <li>The drop-down should be vertically aligned with the text inputs.</li>
  </ul>
  
  <p>Here's my markup:</p>
  
  <pre><code>&lt;form action="" method="post"&gt;
  
      &lt;label for="time"&gt;Time settings&lt;/label&gt;
  
      &lt;div class="description"&gt;
          Description goes here
      &lt;/div&gt;
  
      &lt;span&gt;&lt;label for="time"&gt;Hour&lt;/label&gt; &lt;input type="text" id="time" name="time" maxlength="2" size="2"&gt;&lt;/span&gt;
      &lt;span&gt;:&lt;/span&gt;
      &lt;span&gt;&lt;label for="time-minute"&gt;Minute&lt;/label&gt; &lt;input type="text" id="time-minute" name="time-minute" maxlength="2" size="2"&gt;&lt;/span&gt;
      &lt;span&gt;:&lt;/span&gt;
      &lt;span&gt;&lt;label for="time-seconds"&gt;Seconds&lt;/label&gt; &lt;input type="text" id="time-seconds" name="time-seconds" maxlength="2" size="2"&gt;&lt;/span&gt;
  
      &lt;span&gt;
          &lt;select id="time-ampm" name="time-ampm"&gt;
              &lt;option value="am"&gt;AM&lt;/option&gt;
              &lt;option value="pm"&gt;PM&lt;/option&gt;
          &lt;/select&gt;
      &lt;/span&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>And here is the CSS style:</p>
  
  <pre><code>&lt;style&gt;
      span{
          display: inline-block;
      }
  
      span input { 
          display: block; 
          position: relative; 
          top: -3em; 
          text-align: center;
      } 
  
      span label { 
          display: block; 
          padding-top: 1.5em; 
          text-align: center;
      } 
  &lt;/style&gt;
  </code></pre>
  
  <p>I am also using the HTML 4.01 strict doctype.</p>
  
  <p>Here's the form live in jsfiddle: <a href="http://jsfiddle.net/VuShK/" rel="nofollow noreferrer">http://jsfiddle.net/VuShK/</a></p>
  
  <p>Can anyone give me some pointers as to how to fix this?</p>
  
  <p><strong><em>Solution</em></strong>:
  Thanks to everyone who replied.</p>
  
  <p>Here is my final solution with the text inputs being centered. Thanks to AVD for his help.</p>
  
  <pre><code>&lt;style&gt; 
      span{ 
          display: inline-block; 
          position: relative;
          top: -1em;
          text-align:center;
      } 
  
      span select input {  
          display: block;  
          position: relative;  
          top: -3em;  
      }  
  
      span label {  
          display: block;  
          position: relative;  
          top:2.7em; 
          text-align: center; 
      }  
  &lt;/style&gt; 
  </code></pre>