Wie behebt man die Ausrichtung/Position eines Bildlabels (für Kontrollkästchen/Optionsfelder)?

Question

Code wird von 2 verschiedenen Quellen genommen, ich würde anhängen, aber ich habe nicht 10 rep, um sie zu veröffentlichen.

First attempt. Beachten Sie die schrecklich platzierten Radioknöpfe.

Second attempt. Ich kenne die Quelle nicht, es war ein direktes Google-Ergebnis. Beachten Sie den Unterschied zwischen oberer und unterer Auffüllung/Ausrichtung.

Ich versuchte mit [li] Element, aber es hat nicht funktioniert.

Das Hinzufügen von img{display: block;} zum CSS führt zu unerwarteten Ergebnissen. Es "füllt" das gesamte Element mit dem Bild und der linke Teil des Bildes ist hinter dem grünen Teil verborgen.

Ich bin ein selbsternannter CSS/HTML-Noob, ich kann einige Dinge verstehen und einfache Dinge tun, aber Platzierung/Ausrichtung ist immer noch ein Mysterium für mich.

Ich würde gerne wissen, wie dieser Code funktioniert. Ich plane, einen grünen Rand für den "ausgewählten" "Knopf" hinzuzufügen und einige geringfügige visuelle Sachen zu ändern. Ich würde auch gerne wissen, wie man das "Tick" zentriert und die "Tick" -Markierung lokal/global implementiert und nicht auf content:'\2714'; angewiesen ist.

Helfen Sie mir zu verstehen, was hier passiert, und wie ich das beheben kann (und das Wissen in der Zukunft anwenden).

EDIT: Aktualisiert der 2. Versuch, es sieht ziemlich gut aus, imho. Nur wenn die Ausrichtung behoben wurde .... Seufzer.

Answer 1

ok, das ist wirklich albern klingen wird ...

i hinzugefügt:

img 
{ 
    display:block; 
    margin: 5px 5px 5px 45px; 
} 

und bearbeitet die Ränder ... seine jetzt richtig funktioniert.

aber ich verstehe immer noch nicht nur WARUM gab es diesen schlechten Platz an der Unterseite.

hier ist die neue Version: http://jsfiddle.net/xwussun1/5/

** EDIT: ** auch die Häkchen Position line-height: 6; durch Zugabe fixiert.

Answer 2

Möchten Sie etwas erreichen? http://jsfiddle.net/xwussun1/7/

nicht, dass ich das richtig verstanden, aber hier gehen wir: habe ich das Feld auf diese Weise

top: 50%; 
margin-top: -20px; (minus half the height of the element) 
height: 40px;