How to vertically center a label on a range input

Question

This seems like it would be so simple but its giving me quite a bit of trouble. I've tried using this method already and it doesn't seem to work, as you can see here: http://jsfiddle.net/ENuLz/. Floating the label and the input seems to be a step in the right direction but I still can't quite figure it out.

jsfiddle code:

<div>
    <label for="myslider">Slider:</label>
    <input type="range" id="myslider" min="1" max="100" />
</div>

css:

div {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    border: 1px solid red;
}

Solution: http://jsfiddle.net/ENuLz/17/

^This seems to work in the latest versions of chrome, firefox, and ie.

Answer 1

Here is the code to center the elements vertically

div {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    border: 1px solid red;
}

div label
{
    vertical-align:middle;

}

#myslider
{
    vertical-align:middle;

}

jsFiddle: http://jsfiddle.net/ENuLz/16/