Foros del Web » Creando para Internet » CSS »

Como alinear texto de una lista en relacion al style-list-image?

Estas en el tema de Como alinear texto de una lista en relacion al style-list-image? en el foro de CSS en Foros del Web. estoy necesitando ayuda con este tema.. tengo una lista en mi menu que cada imagen que muestra en su costado es distinta, y el texto ...
  #1 (permalink)  
Antiguo 24/04/2011, 22:15
 
Fecha de Ingreso: enero-2011
Ubicación: Tucuman
Mensajes: 23
Antigüedad: 6 años, 10 meses
Puntos: 0
Como alinear texto de una lista en relacion al style-list-image?

estoy necesitando ayuda con este tema.. tengo una lista en mi menu que cada imagen que muestra en su costado es distinta, y el texto que aparece despues de imagen se posiciona en el "bottom" del block... la imagen aparece mas arriba porque tiene una pequeña sombra.. lo cual deja la ilucion de que el texto no esta bien alineado con la imagen...

les dejo una imagen para que vean y quizas me pueden ayudar.
http://img198.imageshack.us/i/12345gk.png/
tambien dejo mis codigos:

Código:
		<!-- Menú principal -->
		<div id="menu">
		<ul class="menu">
			<li class="inicio">Inicio</li>
			<li class="historia">Historia</li>
			<li class="variedades">Variedades</li>
			<li class="imagenes">Imágenes</li>
			<li class="pye">Producción & Exportación</li>
			<li class="nys">Nutrición & Salud</li>
			<li class="foro">Fóro</li>
		</ul>
		</div>
		<!-- /Menú principal -->
y el css:
Código:
#menu {
	width: 300px;
	margin: 3em 0 0 8em;
	padding: 0;
	position: absolute;
	overflow: visible; }

ul.menu {
	font-size: 150%; 
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	line-height: 1.5em;
	display: block; }

li.inicio {
	list-style: none;
	list-style-image:url(../_img/_iconos/inicio.png); }

li.historia {
	list-style: none;
	list-style-image:url(../_img/_iconos/historia.png); }

li.variedades {
	list-style: none;
	list-style-image:url(../_img/_iconos/variedades.png); }
bueno.. algo asi.. lo que quiero es alinear el texto mas arriba, para que quede "centrado" con la imagen de su costado.. en sentido veritcal obviamente.
  #2 (permalink)  
Antiguo 25/04/2011, 06:26
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2099
Respuesta: Como alinear texto de una lista en relacion al style-list-image?

No sé seguro si con line-height podrás ajustarlo.
Código CSS:
Ver original
  1. #menu ul li {
  2. line-height: XXem (o px, lo que sea);
  3. list-style: none;
  4. }
  5. #menu ul li.historia {
  6. list-style-image: url();
  7. }

También puedes ahorrarte el poner a cada clase diferente de LI el list-style:none y ponerlo como he puesto arriba.
  #3 (permalink)  
Antiguo 26/04/2011, 13:47
 
Fecha de Ingreso: enero-2011
Ubicación: Tucuman
Mensajes: 23
Antigüedad: 6 años, 10 meses
Puntos: 0
Respuesta: Como alinear texto de una lista en relacion al style-list-image?

yo ya habia probado line-height y no funciona como quiero... osea... necesito que el texto este alineado verticalmente centrado con la imagen del style-image del boton de la lista...

creo que no es posible. por lo que estuve averiguando, esta accion no es permitida...

dicen que lo mejor es editar la imagen para que de el aspecto que el texto esta alineado centralmente...
  #4 (permalink)  
Antiguo 23/10/2012, 08:20
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 7 años
Puntos: 4
Respuesta: Como alinear texto de una lista en relacion al style-list-image?

A mi me sucede el mismo problema, estoy intentando alinear la imágen de la lista con el texto, pero no hay manera, he probado de todo, padding, line-height, margin, vertical-align.....y nada.

Etiquetas: alinear, lista, relacion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 15:09.