html - 对齐文本输入下方的标签

Question

我正在尝试将表单中的标签对齐到文本输入框下方。我从 here 改编了我的 CSS .

它在 IE 9 中显示完美，但我在使用 firefox、chrome 和其他浏览器时遇到问题。

这是它在 IE 中的样子:

这是它在 firefox 中的样子:

它在 chrome 中看起来更糟糕，但我想先让它在 firefox 中运行。

主要关注点是:

• 文本输入应在标签上方居中。
• 冒号应与文本输入垂直对齐。
• 下拉菜单应与文本输入垂直对齐。

这是我的标记:

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

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