正确排列标签和输入

Question

我有一个简单的标签和一个数字输入框：

代码是：

<div id="total"><label>Total: <input type="tel" id="totalInput" onKeyUp="updateTotal()" /></label></div>

和css：

label {
    font-size: 16pt;
    font-family: sans-serif;
    margin-right: 0.5em;
}

input {
    font-size: 16pt;
    left: auto;
    float:right;
    width: 60%;
}

#total {
    text-align:right;
}

但无法弄清楚如何将“Total：”这个词向下移动，以便它与输入框中心对齐（或以其他方式看起来很对齐）。

任何帮助都将不胜感激。

Answer 1

将输入的font-size: 16pt属性更改为height: 16pt属性。 http://jsfiddle.net/GZLQy/

Answer 2

您正在寻找文本的line-height属性

class {
    ...
    line-height: 1.2;
    ...
}

Answer 3

您可以使用line-height向下移动标签

label {line-height: 1.5em;} //or there abouts

Answer 4

如果没有现场演示（我实际上从不使用包装输入元素本身的标签），可能会疯狂猜测，但尝试将line-height:16pt添加到标签选择器。

label {
    font-size: 16pt;
    font-family: sans-serif;
    margin-right: 0.5em;
    line-height:16pt;
}