Foros del Web » Creando para Internet » CSS »

duda con vertical-align

Estas en el tema de duda con vertical-align en el foro de CSS en Foros del Web. He ledio sobre esta propiedad y creo que me puede servir para lo que necesito pero no logro hacer que ande: Tengo lo siguiente: Código: ...
  #1 (permalink)  
Antiguo 16/07/2009, 10:58
 
Fecha de Ingreso: marzo-2007
Mensajes: 302
Antigüedad: 10 años, 8 meses
Puntos: 2
Pregunta duda con vertical-align

He ledio sobre esta propiedad y creo que me puede servir para lo que necesito pero no logro hacer que ande:

Tengo lo siguiente:
Código:
<li>
		<div>
			<a href="">
				<img  alt="" src="icono.png"/>
				<span>Titulo1 / OtorTitlo2</span>
			</a> 
		</div>
	</li>
quiero alinear la img con el span en el medio. como puedeo hacer? Grx! (probe con vertical-align:middle pero no funciono)
  #2 (permalink)  
Antiguo 16/07/2009, 11:10
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: duda con vertical-align

aplicale el estilo a la imágen:

Código HTML:
<li>
		<div>
			<a href="">
				<img style="vertical-align:middle;" alt="" ... />
				<span>Titulo1 / OtorTitlo2</span>
			</a> 
		</div>
	</li> 
si no te funciona, revisa si le estás cambiando el display a las img, vertical-align sólo aplica para elementos en linea "inline" no de bloque "block", es posible que tengas un css por ahí así:

Código:
img{
     display:block;
}
  #3 (permalink)  
Antiguo 16/07/2009, 11:40
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: duda con vertical-align

No tenemos una visión global de lo que quieres hacer.
Siempre puedes aplicar la imagen como fondo del propio enlace (si repetir).
Si ese enlace es uno más de una relación, el div que lo contiene no es necesario.
Juega con lo siguiente:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3.     <head>
  4. <title>Kseso? jugando con css </title>
  5. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  6. <style type="text/css">
  7. * {
  8.     margin: 0;
  9.     padding: 0;
  10.     border: 0;
  11.     outline: 0;
  12.     font-weight: inherit;
  13.     font-style: inherit;
  14.     font-size: 100%;
  15.     font-family: inherit;
  16. }
  17. ul {margin: 10px;}
  18. ul li {list-style-type: none; background: #CDCDCD; border: 1px solid #000;float: left;}
  19. ul li a {background: url(imagen.jpg) no-repeat left center; text-decoration:none; display: block; padding:20px; color: #444;}
  20. </head>
  21. <ul>
  22. <li>
  23. <a href="#">Soy enlace con img</a>
  24. </li>
  25. </ul>
  26. </body>
  27. </html>
ajusta los volores de los px a tus necesidades.

También puedes utilizar la propiedad "list-style-image" conjuntamente con "list-style-position"

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 16/07/2009 a las 13:06
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




La zona horaria es GMT -6. Ahora son las 10:36.