• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Listen: Text ausrichten

Spoiler

Mitglied
Servus,

ich habe schon ausfürhlich google bemüht, aber noch keine Lösung gefunden, die funktioniert.
In meiner Liste habe ich den LI-Elementen eine Grafik mitgegeben. Diese ist 22px hoch.

Leider richtet dich der Text am Bottom der Grafik aus, was ziemlich dürftig aussieht.

line-height, padding ... hat alles bis jetzt nichts gebracht.

Wie löse ich mein Problem, dass der Test und die Grafik nun "zentriert" sind.

Code:
li.einlagern
{
margin: 5px 15px;
list-style-image: url(./images/add.png);
}

Vielen Dank im Voraus.

Gruß

Spoiler
 
Werbung:
Verzichte auf list-style-image, schalte den Listenstil mit list-style-type ganz ab und binde die Grafik als Hintergrundgrafik ein. Dann kannst Du die Grafik auch per center zentrieren (horizontal und auch vertikal).
 
Werbung:
Jeder Browser richtet ein per list-style-image eingefügtes Bild leider anders aus. Der eine setzt es 2 oder 3 Pixel weiter oben an als der andere. Daher kann man Text nicht ordentlich daneben positionieren. Man kann das zwar mit Conditional Comments für den IE oder Browserhacks für andere Browser korrigieren, aber die Mühe lohnt sich nicht wirklich. Mit Hintergrundbildern hat man weit mehr und vor allem einheitliche Kontrolle über das Aussehen der Listenpunkte.
 
Jeder Browser richtet ein per list-style-image eingefügtes Bild leider anders aus. Der eine setzt es 2 oder 3 Pixel weiter oben an als der andere. Daher kann man Text nicht ordentlich daneben positionieren. Man kann das zwar mit Conditional Comments für den IE oder Browserhacks für andere Browser korrigieren, aber die Mühe lohnt sich nicht wirklich. Mit Hintergrundbildern hat man weit mehr und vor allem einheitliche Kontrolle über das Aussehen der Listenpunkte.


wirklich? cool, danke etwas neues dazu gelernt ;)
ich habe es einfach immer mit margin und padding formatiert, und mir sind nie Fehler aufgefallen!

Aber leuchtet mir ein
 
Werbung:
Zurück
Oben