Alinear texto en un <li>

[xinxan22]

Hola,

me interesaría hacer una lista (<ul><li>...) de "imágen-texto". Estoy usando

Código HTML:

list-style-image:url('mi_imagen.gif');

para que cada <li> tenga una imagen diferente, pero no consigo alinear el texto a la imagen.

Si uso

Código HTML:

vertical-align: ....

solo funciona top o middle (bottom hace el mismo resultado), y ni uno ni otro me hace bien la alineación del texto.


Gracias,

Saludos

[codeams]

No te entendí muy bien pero yo tomaría un camino distinto: Colocaría un background-image para los li y el texto lo alinearía a la derecha ya después no tendrás que alinear verticalmente el texto sino lo contrario podrás alinear el background al texto para lograr que se vea bien.

Para poder ayudarte más creo que necesito saber: ¿Dentro de los <li> hay algun otro tag? por ejemplo <li><span><a>mi link</a></span></li>.

De ser así quizá debas cambiar el display de los elementos de dentro a display:inline; o display:inline-block;

Si no es ese el caso quizá debas modificar el line-height de los <li>.

Saludos.

Edito: Quizá un último y desesperado recurso sería poner un span con position relative. Ejemplo: <li><span>mi texto</span></li>

Código CSS:

span{
     position:relative;
     top: -2px; /* cambia 2 por el valor que sea necesario */
}
 

[xinxan22]

Hola,

gracias.

Este es el código:

Código HTML:

<ul>

  <li>Texto1</li>
  <li>Texto2</li>
  <li>Texto3</li>

</ul> 

No hay span ni nada por el medio, todo el css lo tiene el li. La idea es ponerle una imagen diferente para cada uno y poder alinear el texto (o como tu bien dices) la imagen.

Saludos

[codeams]

Te recomendaría definir un background y ese ubicarlo.

Código CSS:

li{
background-color:white;
background-repeat: no-repeat;
background-position:left bottom;
}
ul li:first-child{background-image:url(imagen1.png);}
ul li:nth-child(2){background-image:url(imagen2.png);}
ul li:nth-child(3){background-image:url(imagen3.png);}
/* y asi sucesivamente */
 

Puedes cambiar la posicion del background utilizando pixeles porcentajes o lo que más te convenga. Googlea un poco al respecto sobre background-position.