L'alignement des étiquettes de saisie de texte ci-dessous

Je suis en train d'aligner des étiquettes en forme pour aller en dessous d'une zone de saisie de texte. J'ai adapté mon CSS de ici.

Il affiche parfaitement sous IE 9, mais j'ai de la difficulté avec firefox, chrome et d'autres.

Voici à quoi il ressemble dans IE:

Et c'est à quoi il ressemble dans firefox:

Il ressemble beaucoup pire dans chrome, mais je voudrais qu'il fonctionne dans firefox en premier.

Les principales préoccupations sont:

• La saisie de texte doit être centré au-dessus de l'étiquette.
• Les deux points doivent être alignés verticalement, avec le texte des entrées.
• La liste déroulante doit être aligné verticalement avec le texte des entrées.

Voici mon balisage:

<form action="" method="post">

    <label for="time">Time settings</label>

    <div class="description">
        Description goes here
    </div>

    <span><label for="time">Hour</label> <input type="text" id="time" name="time" maxlength="2" size="2"></span>
    <span>:</span>
    <span><label for="time-minute">Minute</label> <input type="text" id="time-minute" name="time-minute" maxlength="2" size="2"></span>
    <span>:</span>
    <span><label for="time-seconds">Seconds</label> <input type="text" id="time-seconds" name="time-seconds" maxlength="2" size="2"></span>

    <span>
        <select id="time-ampm" name="time-ampm">
            <option value="am">AM</option>
            <option value="pm">PM</option>
        </select>
    </span>
    </form>

Et voici la feuille de style 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>

Je suis également en utilisant le HTML 4.01 strict doctype.

Voici le formulaire de vivre dans jsfiddle: http://jsfiddle.net/VuShK/

Quelqu'un peut-il me donner une idée de comment résoudre ce problème?

Solution:
Merci à tous ceux qui ont répondu.

Voici ma solution finale avec le texte des entrées étant centré. Grâce à l'AVD pour son aide.

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