CSSトグルスイッチの調整

Question

thisツールの使用CSSトグルスイッチを作成することはできましたが、ページ上に配置すると上端がわずかにずれているため、その原因を見つけることができないようです。

私はCSSに熟練していませんが、onoffswitch-switchクラスはclick onとonoffswitch-innerで動く円を指していると理解しているので、各オプションを参照するとonoffswitchまたはonoffswitch-しかし私はこれを引き起こす可能性のあるマージンオプションを見ていないし、スタートボタンにも何もない。

トグルスイッチは、もともと私がインラインに切り替え

display: block; 

に付属しています。

Hereの完全なコードです。

Answer 1

パディングまたは余白が設定されていないため、チェックボックスは親要素の上部に揃えられます。パディングやマージンを使用することもできますが、より反応性の高いデザインのためには、vertical-align：middleをonoffswitchクラスに追加することをおすすめします。

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