Выравнивание надписей под вводом текста

Question

Я пытаюсь выровнять метки в форме, чтобы она находилась ниже поля ввода текста.Я адаптировал свой CSS из здесь .

. Он отлично отображается в IE 9, но у меня проблемы с Firefox, Chrome и другими.

Вот как это выглядитв IE:

И вот как это выглядит в Firefox:

Это выглядит намного хуже в Chrome,но я бы хотел, чтобы он сначала работал в Firefox.

Основные проблемы:

• Ввод текста должен быть в центре над метками.
• Двоеточиедолжен быть выровнен по вертикали с вводом текста.
• Выпадающий список должен быть выровнен по вертикали с вводом текста.А вот стиль CSS:

  <style>
      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;
      } 
  </style>
  

  Я также использую строгий тип HTML 4.01.

  Вот форма, живущая в jsfiddle: http://jsfiddle.net/VuShK/

  Может кто-нибудьдайте мне несколько советов, как это исправить?

  Решение : Спасибо всем, кто ответил.

  Здесьмое окончательное решение с центром ввода текста.Спасибо AVD за помощь.

  <style> 
      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; 
      }  
  </style> 
  

Answer 1

Попробуйте,

<style>
    span{
        display: inline-block;
    }

    span select input { 
        display: block; 
        position: relative; 
        top: -3em; 
    } 
    span input { text-align:center;}
    span label { 
        display: block; 
        position: relative; 
        top:3em;
        text-align: center;
    } 
</style>

Answer 2

Проверьте это

    <form action="" method="post">  
<table>
    <tr>
        <td colspan="4">
           <label for="time">Time settings</label> 
        </td>
    </tr>
    <tr>
        <td colspan="4">
            <label for="Description">Description goes here</label>  
        </td>
    </tr>
    <tr>
        <td>
            <span><input type="text" id="time-minute" name="time-minute" maxlength="2" size="2"><label for="time">:</label></span>
        </td>
        <td>
            <span><input type="text" id="time-minute" name="time-minute" maxlength="2" size="2"><label for="time-minute">:</label></span>
        </td>
        <td>
            <span>  <input type="text" id="time-seconds" name="time-seconds" maxlength="2" size="2"><label for="time-minute">:</label></span>
        </td>
        <td>
            <span><select id="time-ampm" name="time-ampm"><option value="am">AM</option><option value="pm">PM</option></select></span>
        </td>
    </tr>
    <tr>
        <td>
            <label for="time">Hour</label>
        </td>
        <td>
            <label for="time-minute">Minute</label>
        </td>
        <td>
            <label for="time-minute">Seconds</label>
        </td>
        <td>&nbsp;</td>
    </tr>
</table>     

Answer 3

<div style="overflow:hidden;border:1px blue solid;">

<div style="float:left;width:120px;border:1px lime solid;text-align:center;">
    <input style="width:80%;"> :
    <div style="border:1px red solid;">Hours</div>
</div>
<div style="float:left;width:120px;border:1px lime solid;text-align:center;">
    <input style="width:80%;"> :
    <div style="border:1px red solid;">Minutes</div>
</div>
<div style="float:left;width:120px;border:1px lime solid;text-align:center;">
    <input style="width:80%;"> :
    <div style="border:1px red solid;">Seconds</div>
</div>
<div style="float:left;width:120px;border:1px lime solid;text-align:center;">
    <select style="width:90%;"></select>
</div>

</div>