Wie zentriert man mittels CSS das Bild einer Aufzählungsliste (UL, LI)?

Eine Aufzählung (UL, OL) ist in einem HTML-Dokument wichtig und wird ebenso häufig wie Grafiken, Tabellen, Bilder oder Text genutzt. Doch das Standard-Design für eine Aufzählung wird schnell langweilig und so denken vielen Webseiten-Admins daran, die Aufzählungszeichen durch eine eigene Grafik zu ersetzen. Ein klassisches Beispiel ist eine Pro- und Contra-Liste, die man in Kombination einer UL-Aufzählung und ansprechenden Grafik sehr gut umsetzen kann. 

Das Problem oftmals ist die korrekte Ausrichtung der Grafik, die man mittels list-style-image setzt: der Browser setzt die Grafik nach oben, der Text bleibt aber mittig zentriert. Das Ergebnis ist ein Versatz, so dass die Aufzählung nicht 100% mittig ausgerichtet ist. Leider gibt es in CSS keine Möglichkeit, dem UL-Element mitzuteilen, die Grafik besser zu positionieren. Ein vertical-align funktioniert an dieser Stelle nicht, aber wir zeigen eine Möglichkeit, wie man die Grafik trotzdem korrekt ausrichten kann.

Beginnen wir damit, woran viele zuerst denken:

ul.listPro {
    list-style-image: url("fazit-pro.png");
}

ul.listContra {
    list-style-image: url("fazit-contra.png");
}

Das Bild zeigt, dass der Browser den Text standardmäßig mittig zentriert, die Grafik möglichst weit oben platziert. Es entsteht ein unschöner Absatz.

Da wie bereits erwähnt ein vertical-align nicht weiterhilft, könnte man nun den Kompromiss eingehen und die Zeilenhöhe (line-height) des Textes anpassen. Sieht nicht nur schrecklich aus, sondern löst das Problem weiterhin nicht.

Die Lösung liegt bei den Listenelementen, indem man diesen ein Hintergrund verpasst. Dazu entfernt zuerst die Standard-Aufzählunszeichen mithilfe von list-style-type und list-style-image. Die Aufzählung ist an diesem Punkt ohne Aufzählungszeichen.

Diese ergänzen wir nun bei den Listenelementen (LI), indem ein Hintergrund gesetzt wird (background: url(grafik.gif) 0 4px no-repeat). Dieser soll sich nicht wiederholen und 4px vom oberen Rand entfernt sein. Letzteres ist unser Mittel, um die Grafik korrekt mittig auszurichten. Damit der Text nicht über die Grafik liegt, ergänzen wir ein padding-left.

ul.listPro, ul.listContra {
    list-style-type: none;
    list-style-image: none;
    margin-left: 0;
}

ul.listPro li {
    background: url("fazit-pro.png") 0 4px  no-repeat;
    padding-left: 20px;
}

ul.listContra li {
    background: url("fazit-contra.png") 0 4px  no-repeat;
    padding-left: 20px;
}

That's it!