Imagen de estilo de lista CSS

Tengo un problema con la etiqueta CSS list-style-image, mi imagen de lista es algo grande, y el texto detrás de ella se empuja hacia la parte inferior de la etiqueta de estilo, ¿hay una solución para volver a morderlo en el medio?

ahora es así:

| | | aquí

y quiero ser:

| | aquí |

preguntado el 09 de enero de 11 a las 01:01

el | o debajo de cada uno, de alguna manera se estropearon cuando lo publiqué: x -

No estoy seguro de entender la pregunta. ¿Puedes explicarlo con más detalle? Los ejemplos de código reales siempre ayudan. -

5 Respuestas

Simplemente aumente la altura de línea de los elementos li en cuestión.

#iconlist li {
  line-height: 2em;
}

Además, como sugirió keithjgrant, usaría imágenes de fondo en su lugar. Las imágenes de lista se colocan de manera bastante inconsistente en diferentes navegadores. Entonces usa algo como esto:

#iconlist li {
  padding-left: 22px;
  background: url(20x20-icon.png) left center no-repeat;
  line-height: 22px;
  list-style: none;
}

Respondido el 09 de enero de 11 a las 15:01

Olvídese de configurar la imagen de estilo de lista y use el siguiente CSS ...

ul#example li {
    list-style-type: none;
}

/* create new marker */
ul#example li:before {
    display: marker;
    content: url("new_marker.png");
    /* set the following to fit your needs */
    vertical-align: 3px;
    padding-left: 2px;
    padding-right: 12px;
}

Tenga en cuenta el estilo de alineación vertical, configúrelo en cifras menos para empujar el texto hacia arriba.

Fuente de respuesta.

Respondido 20 Jul 12, 19:07

Su pregunta es un poco confusa, pero parece que podría necesitar mirar imágenes de fondo en lugar de (o complementar) imágenes de estilo de lista.

Respondido el 09 de enero de 11 a las 04:01

La única forma realista de lograrlo es con background-image:

ul li {
    background: transparent url(http://farm1.static.flickr.com/120/308863127_6eb1715f3b_m.jpg) 0 50% no-repeat;;
    list-style-position: outside;
    padding-left: 250px;
    line-height: 160px; /* vertical height of image */
}

Demostración de JS Fiddle.

Esto, sin embargo, fallará mal si el texto de la li se ajusta a una segunda (o tercera) línea.

Respondido el 09 de enero de 11 a las 16:01

Trata vertical-align: middle; (css)

Respondido 26 Feb 12, 02:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.