Warum greift vertical-align hier nicht?

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Die Checkbox hat keine Beschriftung, muss aber eine haben.

Und natürlich auch: Das Bild heat keinen Alterntativtext, muss aber einen haben.

Das Bild (bzw. dessen Alterntativtext) sind die Beschriftung für die Checkbox? Dann kannst du Bild und Checkbox ins label tun:

<label>
  <img src="…" alt="…"/>
  <input name="…"/>
</label>

oder die Verknüpfung per for und ID herstellen:

<label for="my-checkbox">
  <img src="…" alt="…"/>
</label>
<input name="…" id="my-checkbox"/>

Warum -5px? Wo kommen die her? Magic numbers sind tunlichst zu vermeiden. Was immer du vorhast, mach es anders.

Ich denke, du willst das Bild mittig zur Checkbox ausrichten? Dann einfach per Schlüsselwort vertical-align: middle. Siehe CodePen.

LLAP 🖖