l'alignement de list-style-image proportionnellement avec le texte

J'ai donc

<ul>
  <li>Hello</li>
</ul>

et

li {
    list-style-image: url(../img/bullet.png); /* 13x13 px */
    /* line-height: 13px; */
    /* vertical-align: middle; */
    padding-left: 5px;
}

qui ressemble

l'alignement de list-style-image proportionnellement avec le texte

comme vous pouvez le voir texte et de l'image de l'élément de <li> ne sont pas alignées verticalement (l'image est plus élevé que le texte), j'ai essayé d'appliquer la hauteur de la ligne et vertical-align (a commenté le code), mais il n'en avait même pas. Est-il un moyen de parvenir à un bon alignement,?

OriginalL'auteur Ilja | 2013-02-05

  1. 17

    Le rembourrage affectera seulement tout ce qui est à l'intérieur de l'élément de texte, dans votre cas.

    Le seul réglage de la position de biens disponibles est list-style-position, mais les seules valeurs autorisées sont inherit, inside ou outside. La pratique la plus courante consiste à utiliser:

    list-style: none;

    et ensuite appliquer l'image désirée que la <li>'arrière-plan

    li {
    /** the image will be vertically aligned in the center **/
    background: url(../img/bullet.png) left center no-repeat; 

    /** move the text to the right **/
    padding-left: 20px; 
}
    N'oubliez pas d'ajouter no-repeat pour votre arrière-plan de la propriété.
    En utilisant cette méthode présente certains avantages. Vous pouvez ajuster la position de vraiment bien. Lorsque le <li> texte passe à la ligne (pensez téléphones mobiles), le texte aligne verticalement avec le début de la première ligne. Vous devrez peut-être ajouter min-height si la balle img est plus grande qu'une ligne de texte.

    OriginalL'auteur Teneff

  2. 1

    Peut définir une img-tag ou un background: url(..) pour la li-tag à la place de la "list-style-image"

    Oui, mais j'ai un peu envie de le comprendre, avec list-style-image.

    OriginalL'auteur Paket2001

  3. 1

    vous pouvez avoir

    <li><span style="top:-5px; position:relative;">Text shifted 5px upper</span></li>

    OriginalL'auteur Fanky

  4. 0

    Lorsque vous n'avez qu'une seule ligne pour chaque élément de la liste, vous pouvez ajouter quelques padding-bottom à la li élément

    Il a essayé, n'a pas aider ;/

    OriginalL'auteur HCS-Support

  5. 0

    J'ai aussi besoin d'ajouter un "no-repeat" à l'arrière-plan de la propriété

    OriginalL'auteur Levi