So richtest du Icons in Listen mit mehrzeiligem Text perfekt aus

Better Icon and Label Alignment

Ein häufiges Layout-Problem: In Listen mit Icons wird das Icon bei mehrzeiligem Text vertikal zentriert, was unschön aussieht. Der Artikel zeigt zwei Lösungen – für Icons als HTML-Element und für Icons als Pseudo-Element. Die zentrale Technik nutzt die CSS-Einheit lh und berechnet den Offset mit calc((1lh - icon-size) / 2). So bleibt das Icon unabhängig von Schriftgröße, Icon-Größe und Containerbreite korrekt ausgerichtet.