duda con vertical-align

usuaria · #1 (**permalink**) 16/07/2009, 09:58

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)

maycolalvarez · #2 (**permalink**) 16/07/2009, 10:10

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;
}

kseso? · #3 (**permalink**) 16/07/2009, 10:40

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
    <head>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
}
ul {margin: 10px;}
ul li {list-style-type: none; background: #CDCDCD; border: 1px solid #000;float: left;}
ul li a {background: url(imagen.jpg) no-repeat left center; text-decoration:none; display: block; padding:20px; color: #444;}
</style>
</head>
<body>
<ul>
<li>
<a href="#">Soy enlace con img</a>
</li>
</ul>
</body>
</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