No se si te vale así.
ul { width: 900px; text-align: center; border: 1px solid green }
li { display: inline; position:relative; margin: 0 auto; border: 1px solid red}
li span { position: absolute; top: 100px; left: 0; }
<ul>
<li><img src="foto1.jpg" width="150" height="100" alt="Foto 1" />
<span>Piede foto 1</span>
</li>
<li><img src="foto2.jpg" width="150" height="100" alt="Foto 2" />
<span>Pie
de foto 2</span></li>
<li><img src="foto3.jpg" width="150" height="100" alt="Foto 3" />
<span>Pie
de foto 3</span></li>
</ul>
Espero que te sirva
----- Mensaje original ----
De: Gael <[EMAIL PROTECTED]>
Para: "Ovillo, la lista de CSS en castellano" <[email protected]>
Enviado: lunes, 5 de noviembre, 2007 16:18:17
Asunto: [Ovillo] Lista horizontal centrada de imágenes con pie
Hola!
Como siempre, recurro a la lista después de estarme rompiendo la
cabeza
durante horas con una maldita lista. :-)
Lo que quiero conseguir es una lista horizontal centrada, la típica
con:
ul { text-align: center; margin: 0 auto; }
li { display: inline; }
Pero el contenido de los elementos son imágenes con un pie de foto.
Algo
así:
<ul>
<li><img src="foto1.jpg" width="150" height="100" alt="Foto 1" />Pie
de foto 1</li>
<li><img src="foto2.jpg" width="150" height="100" alt="Foto 2" />Pie
de foto 2</li>
<li><img src="foto3.jpg" width="150" height="100" alt="Foto 3" />Pie
de foto 3</li>
</ul>
De manera que, para que quede el pie bajo la foto, debería poner
img { display: block; }
con lo que el display inline de los li se va a hacer puñetas y la
lista
queda vertical.
He probado con float: left en los li (pero no quedan centrados
horizontalmente), con <p> en los pies de foto (pero vuelve a quedar
vertical), con <br /> entre la foto y el pie... Probaría con listas de
definición (dt para la foto y dd para el pie) pero no todas las fotos
tendrán pie y no me convence la idea de dejar dd vacíos.
Alguien sabe cómo conseguirlo? Cómo centrar horizontalmente una lista
con elementos de bloque o cómo conseguir el mismo efecto con otro
marcado?
Muchas gracias!
Gael
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
______________________________________________
Pregunta, Responde, Descubre.
Comparte tus consejos y opiniones con los usuarios de Yahoo! Respuestas
http://es.answers.yahoo.com/info/welcome
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
