Как вертикально центрировать метку на вводе диапазона

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

Я добавил этот CSS к метке, содержащейся в вашем DIV:

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

Он будет центрировать метку над ползунком, который я считаю, это то, что вы просите.

FIDDLE

Answer 3

Добавить

label {  
    display: block; 
} 

Answer 4

Вот вертикальное выравнивание:

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