對齊CSS撥動開關

Question

使用this工具，我能夠創建一個CSS撥動開關，但如果放在我的網頁上是稍微偏離的頂部和似乎無法能夠找到什麼導致它。

我對CSS並不是很有經驗，但是從我所瞭解的onoffswitch-switch類指的是在點擊和onoffswitch-內部移動的圓圈引用每個選項，因此它必須是onoffswitch或onoffswitch-label，但我沒有看到任何可能導致此問題的保證金選項，並且開始按鈕也沒有任何一項。

撥動開關原本帶着

display: block; 

我切換到內聯。

Here的完整代碼。

Answer 1

由於沒有填充或餘量設置，您的複選框對準它的父元素的頂部。您可以使用填充或邊距，但我建議在onoffswitch類中添加vertical-align：middle以獲得更響應的設計。

.onoffswitch { 
    position: relative; width: 105px; 
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; 
    display: inline-block; 
    vertical-align: middle; 
}