Выстроить этикетку и правильно ввести

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

Но не могу понять, как переместить слово «Итого:» вниз, чтобы оно было выровнено по центру (или иным образом выровнено) в поле ввода.

Любая помощь будет оценена.

Answer 1

Измените атрибут font-size: 16pt ввода на атрибут height: 16pt.http://jsfiddle.net/GZLQy/

Answer 2

Может показаться дикой догадкой без живой демонстрации (на самом деле я никогда не использую метки, которые обертывают сам элемент ввода), но попробуйте добавить line-height:16pt к вашему селектору меток.

Answer 3

Вы можете использовать line-height, чтобы переместить метку вниз

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

Answer 4

вы ищете line-height свойство текста

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