Bueno, tras dar unas cuantas vueltas, he conseguido parte del objetivo.
Ahora ya aparecen los bloques bien ordenados, y conforme se va estrechando la pantalla, se recolocan en distintas líneas.
Ahora me gustaría que todo quedase centrado en la pantalla. Para eso he intentado poner un DIV general que englobe a los demás, pero no termino de conseguirlo.
Aquí va el código:
Código:
CSS:
.bloquelibros{
width: 90%;
margin: 0 auto;
text-align: center;
border-style:solid;
border-width:5px;
display: table;
}
.libros {
float: left;
width: 200px;
height: 200px;
text-align: center;
vertical-align:bottom;
margin: auto 15px 100px 15px;
}
Código:
<div class="bloquelibros">
<div class="libros"><a href="http://...">BlaBlaBla</a><br /><a type="image" href="2048/0140.jpg" target="_blank"><br /><img src="thumbnails/0140.jpg" alt="0140" width="200" height="115" /></a>
</div>
<div class="libros"><a href="http://...">BlaBlaBla</a><br /><a type="image" href="2048/0140.jpg" target="_blank"><br /><img src="thumbnails/0140.jpg" alt="0140" width="200" height="115" /></a>
</div>
...
...
...
</div>
Lo de "display:table" lo he puesto porque si no aparecían los dos DIV como independientes en vez de estar anidados.