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

这看起来好像很简单，但它给我带来了一些麻烦。我已经尝试过使用this method，它似乎不起作用，正如您在此处看到的那样：http://jsfiddle.net/ENuLz/。浮动标签和输入似乎是朝着正确方向迈出的一步，但我仍然无法弄清楚。如何在范围输入上垂直居中标签

的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，火狐和IE的最新版本的工作。

来源

2014-02-14 Robby Allsopp

这里是居中的元素垂直

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/

来源

2014-02-14 01:03:51

这看起来很棒在铬和Firefox，但不是伟大的即。尽管如此，仍然赢不了。 –

这让我了解了我刚刚添加到我原始问题的解决方案的大部分方法。谢谢！ –

@RobbyAllsopp不用担心 –

我加入这个css来包含你的专区内标签：

div label { 
    display:block; 
    width:100%; 
    text-align:center; 
}

这将围绕滑块，我相信这是你问上面的标签。

FIDDLE

来源

2014-02-14 00:53:30 steinmas

对不起我的头衔并不清楚。我想垂直居中，而不是水平地位于上方或下方。 –

@Lexicon有一个很好的解决方案。 – steinmas

添加

label {  
    display: block; 
}

来源

2014-02-14 00:54:33 ioseph

对不起，我的标题不清楚。我想垂直居中，而不是水平地位于上方或下方。 –

您可以为两个元素添加边距顶部，我建议您使用开发人员工具，以便快速调整，直到像素完美为止。 – ioseph

这里是垂直对齐方式：

在HTML：

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

在CSS：

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

http://jsfiddle.net/ENuLz/4/

来源

2014-02-14 00:57:19 Lexicon

是的，这就是当我漂浮他们时得到的，但它仍然没有真正看到我的中心。如果你添加一个边框到标签中，你可以看到它不是真正居中在div：jsfiddle.net/ENuLz/14/，也不是居中，如果你删除浮动：jsfiddle.net/ENuLz/15/ –

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

回答

相关问题