Liste vertikal ausrichten text mittig mit list-style-image

Ich versuche, vertikal ausrichten von text in eine Liste li und Probleme.
First off, müssen Sie wissen, dass ich ersetzt habe meine list-style-image mit einem benutzerdefinierten Bild. Dies ist mein CSS:

ul.cogs li { 
    list-style-image: url(Images/li_cog.png); 
    height: 50px; 
    line-height: 50px; 
}

Habe ich versucht zu sehen, ob es war ein Weg, um den text auszurichten, um die Mitte.
Ich habe versucht:

vertical-align: middle;

das hat nicht funktioniert, ich versuchte es dann mit:

line-height: 50px;

welche auch nicht funktioniert, also habe ich versucht:

display: table

was auch geklappt hat, aber das Bild verschwindet aus der Liste....

Kennt jemand einen Weg, diese zu arbeiten?

übrigens: vertical-align Eigenschaft wird für die Arbeit table oder table-cell

InformationsquelleAutor r3plica | 2014-01-29

  1. 22

    Das Problem mit list-style-image ist, dass man nicht richten mit dem text, das beste, was zu tun ist, zu verwenden background-image für li element, und verwenden Sie dann padding-left für Ihre li Elemente.

    Buggy Demo (das Problem, Das Sie konfrontiert sind)

    Demo

    ul li {
    background-image: url(http://png-5.findicons.com/files/icons/2222/gloss_basic/32/bullet_black.png);
    background-repeat: no-repeat;
    line-height: 30px;
    padding-left: 30px;
}

ul {
    margin: 50px;
}
    Wenn Sie min-height statt line-height dann der Zeilenabstand zwischen dem text in den <li> wenn es auf die nächste Zeile umbricht bleiben die gleichen wie die anderen Texte auf Ihrer Seite. Aber wenn es eine einzige Zeile, und die Kugel Bild ist größer als die line-height ist, wird es keine überschneidungen geben Sie die Kugel in den nächsten <li>

    InformationsquelleAutor Mr. Alien

  2. 7

    können Sie

    <li><span style="top:-5px; position:relative;">Text shifted 5px upper</span></li>
    Damit bewegt sich sowohl die text-und die Bild.

    InformationsquelleAutor Fanky

Schreibe einen Kommentar