Question

I have a simple label, 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.

Answer 1

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