这看起来很简单,但给我带来了很多麻烦。我试过使用 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。
最佳答案
下面是让元素垂直居中的代码
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/
关于css - 如何在范围输入上垂直居中标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21768799/