Question

这看起来很简单，但它给我带来了很多麻烦。我已经尝试过使用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，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/

Answer 2

这是垂直对齐方式：

在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/

Answer 3

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

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

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

FIDDLE

Answer 4

添加

label {    
    display: block;
}

Answer 5

有了 flexbox ，我们现在有了另一个解决方案。我们只需要align-items：

div {
  /* Use flexbox and center items vertically */
  display: flex;
  align-items: center;
  /* The following aren't needed, they just help us to see the effect */
  height: 3rem;
  padding: 1rem;
  border: 1px dotted #555;
}

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

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

5 个答案: