Gutscheine-Live.de

Gutscheinfinder für Browser

Aktuelle Gutscheine, Deals und lokale Angebote

mehr infos

CSS: list-style-image vertikal zentrieren

Ich stand heute vor einem kleinen Problem, welches aber doch recht schnell zu lösen war. Ich wollte in einer Auflistung nicht das normale Aufzählungszeichen verwenden, sondern ein eigenes Bild. Hierfür nutzte ich die CSS Eigenschaft list-style-image. Das Bild wurde auch korrekt angezeigt, allerdings gab es ein neues Problem: Der Text, welcher rechts neben dem Aufzählungszeichen angezeigt wird, war nicht mehr mittig neben dem Bild, sondern am unteren Ende. Es musste also eine andere Lösung her, welche ich schnell gefunden habe und hier mit euch teilen möchte.

Hier nun meine Lösung, mit der ich es geschafft habe den Text vertikal neben dem Aufzählungszeichen zu zentrieren:

  • Ich verzichte auf die Eigenschaft list-style-image
  • Ich schalte list-style-type auf none, um das Standardaufzählungszeichen abzuschalten
  • Ich lade das Aufzählungszeichen als background-image im Listen-Element (li)
  • Ich setze background-repeat auf none, damit sich das Aufzählungszeichen nicht wiederholt
  • Mittels padding-left platziere ich den Text weiter rechts, sodass er außerhalb vom Aufzählungszeichen ist
    (Achtung: Sollte die Liste eine fixe breite haben so muss der Wert, der bei padding-left eingegeben wird, natürlich auch bei der Breite abgezogen werden)

Recht einfache, aber sehr effektive Lösung. Falls Ihr Probleme damit haben solltet einfach in die Kommentare schreiben, am besten mit einem Link wo ich mir euer Problem anschauen kann.

 

Aktualisiert am

Schlagwörter: , , ,

Ein Kommentar

  1. Stehe vor dem gleichen Problem …
    Hast Du ein Bsp. Quellcode für mich?

    Wäre super

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *