如何在範圍輸入上垂直居中標籤

這看起來好像很簡單，但它給我帶來了一些麻煩。我已經嘗試過使用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/ –

如何在範圍輸入上垂直居中標籤

回答

相關問題