Lining up label and input correctly

I have a simple labe开发者_如何学运维l, and a number input box:

The code for which is this:

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

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

But can't figure out how to move the word "Total:" down so that it is center-aligned (or otherwise looking well-aligned) to the input box.

Any help would be appreciated.

---

Change the input's font-size: 16pt attribute to a height: 16pt attribute. http://jsfiddle.net/GZLQy/

---

you are looking for the line-height property of the text

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

---

You can use line-height to move the label down

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

---

Might be a wild guess without a live demo (I actually never use labels that wrap the input element itself) but try adding line-height:16pt to your label selector.

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