css - 如何在范围输入上垂直居中标签

Question

这看起来很简单，但给我带来了很多麻烦。我试过使用 this method已经并且它似乎不起作用，正如您在此处看到的那样:http://jsfiddle.net/ENuLz/ . float 标签和输入似乎是朝着正确方向迈出的一步，但我仍然不太明白。

jsfiddle代码:

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

解决方案: http://jsfiddle.net/ENuLz/17/

^这似乎适用于最新版本的 chrome、firefox 和 ie。

Answer 1

下面是让元素垂直居中的代码

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/