ayuda con thumbails

[RIVERMILLOS]

hola tengo una galeria que cuando mustra las fotos las muestra asi



quiciera saber como hago para que las imagenes pequeñas como las del centro quende en el centro de las grandres osea que no queden todas alineadas al borde de arriba de la imagen.

Código:

este es el css

.thumbs{
float:left;	
margin:5px;	
padding:1px;
background-color:#CCC;
}

y asi va el html

Código:

<div class="thumbs">
<a href="#" onclick="mostrarFoto('carro1_thumb.jpg');return false; ">
<img src="../View/galeria/thumbs/carro1_thumb.jpg">
</a>
</div>
<div class="thumbs">
<a href="#" onclick="mostrarFoto('carro2_thumb.jpg');return false; ">
<img src="../View/galeria/thumbs/carro2_thumb.jpg">
</a>
</div>

que puedo hacer saludos

[kseso?]

Sin tener otra información complementaria (como compatibilidad), fíjese en este ejemplo: http://bit.ly/bxwBRc
Deje el selector siguiente tal que así:

Código CSS:

#segundo .hijo {
margin:10px 0;
vertical-align:middle;
width:100px;
}
 

y aumente el contenido de alguno de ellos para ver qué sucede.

Espero lo encuentre útil como punto de partida.

[RIVERMILLOS]

hola ya utilice lo que me dijiste pero no funcion , segun el ejemplo que me diste los div estan en una lista?

saludos

[kseso?]

Pues he debido comprender mal lo que desea conseguir.
Esta es la idea que me hice y lo que se logra en ese ejemplo con la variación indicada:

Y en ese ejemplo no hay listas (ul/li). Sólo tiene que ver el código. Son div´s, pero nada impide hacer los cambios oportunos para que lo sea (una lista) si es lo que precisa.

[RIVERMILLOS]

ummm precisamente lo que aparece en la imagen es lo que yo quiero pero con el css que me diste no funciono...?

podrias darme un ejemplo de la img


saludos

[RIVERMILLOS]

hola mira lo logre con este css

Código:

.thumbs{
    background: #CCC;
	display: inline-block;
	letter-spacing: normal;
	font-size: normal;
	white-space: normal;
	text-align: normal;
	vertical-align: middle;
	border: 1px solid #fff;
	margin:5px 10px;
	padding:1px;
}

.padre {
	text-align: center;
	font-size: 20px;
	letter-spacing: 20px;
	line-height: 12px;
	overflow: hidden;
	padding: 10px 0;
}

pero no entiendo porque funciona?


saludos

[kseso?]

La función principal de ese ejemplo no era la alineación vertical, sino el centrado horizontal de un número variable de elementos con tamaños dispares.
Símplemente incluí la propiedad /vertical-align/ para ajustarlo a su captura. Teniendo en cuenta que en las cajas su posicionamiento /display/ ya era compatible.