CSS-Umschalter ausrichten

Question

Mit dem Tool konnte ich einen CSS-Umschalter erstellen, aber wenn er auf meiner Seite platziert wird, ist er leicht oben und scheint nicht in der Lage zu sein, den Auslöser zu finden.

Ich bin nicht so mit CSS erlebt, aber von dem, was ich die onoffswitch-Switch-Klasse bezieht sich auf den Kreis zu verstehen, die auf Klick bewegt und onoffswitch-Innen jede Option beziehen, so dass es entweder onoffswitch oder onoffswitch-Etikett sein muss, aber ich sehe keine Margin-Option, die dies verursachen könnte und die Start-Taste hat auch keine.

Der Kippschalter ursprünglich kam mit

display: block; 

die ich inline geschaltet.

Here ist der volle Code.

Answer 1

Da kein Padding oder Rand festgelegt ist, wird das Kontrollkästchen am oberen Rand des übergeordneten Elements ausgerichtet. Sie können padding oder margin verwenden, aber ich würde vorschlagen, dass Sie vertikal-align: middle zur Klasse onoffswitch für ein reaktionsfähigeres Design hinzufügen.

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