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

这看起来很简单，但它给我带来了不少麻烦。我已经尝试过使用，但似乎不起作用，如您在此处看到的：。浮动标签和输入似乎是朝着正确方向迈出的一步，但我仍然不能完全理解

JSIDLE代码：

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

解决方案：

---

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

我将此css添加到div中的标签中：

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

它会将标签置于滑块上方的中心，我相信这正是您所要求的

添加

label {    
    display: block;
}

---

以下是垂直对齐：

在HTML中：

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

---

以下是元素垂直居中的代码

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

div label
{
    vertical-align:middle;

}

#myslider
{
    vertical-align:middle;

}

---

jsiddle:

使用flexbox，我们现在有了另一个可用的解决方案。我们只需要对齐项目：

div{
/*使用flexbox并将项目垂直居中*/
显示器：flex；
对齐项目：居中；
/*以下内容不需要，它们只是帮助我们看到效果*/
高度：3雷姆；
填充：1rem；
边框：1个点#555；
}

滑块：

对不起，我的标题不清楚。我想垂直居中，而不是水平上下。对不起，我的标题不清楚。我想让它们垂直居中，而不是水平上下。你可以在两个元素上都添加一个边距顶部，我建议你使用开发工具，这样你可以快速调整，直到像素完美。是的，这就是我浮动它们时得到的结果，但对我来说，它仍然没有真正居中。如果你在标签上添加边框，你可以看到它在div:jsfiddle.net/ENuLz/14/中没有真正居中，如果你删除float:jsfiddle.net/ENuLz/15/也没有居中。这在chrome和firefox中看起来很好，但在ie中不太好。但这并不能赢得所有的关注。这让我找到了我刚才添加到原始问题中的大部分解决方案。谢谢@RobbyAllsopp不担心可能的副本

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

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

div label
{
    vertical-align:middle;

}

#myslider
{
    vertical-align:middle;

}