Alignement vertical du contenu d'un div à 100%

Bonjour,
J'aimerai savoir si il est possible d'aligner verticalement le contenu d'un div fesant 100%. En fait, le div contient un nombre de bloc qui varie.
Les blocs font 250px de largeur et sont en float left, ce qui fait que si la résolution de l'écran est à 800 x 600, il n'y aura que 2 blocs par ligne, 3 en 1024 x 768, etc.
Explication en image :


Merci pour vos réponses.

Bonjour,

Pour commencer, s'il s'agit d'images, tu peux utiliser text-align: center (et pas de float). C'est par contre très limité (il ne faut avoir que des éléments en affichage de type en-ligne).

Pour des blocs centrés de la sorte: théoriquement, ce genre de chose devrait se gérer avec display: inline-block. Sauf que l'implémentation de "inline-block" par les navigateurs laisse largement à désirer, à cause de deux navigateurs principalement: Internet Explorer et... Firefox.

Une autre solution un peu plus compatible consiste à créer un bloc (div) autour de tes petits blocs, et à lui attribuer un affichage de type tableau pour le centrer:

div#serie-de-blocs {display: table; margin: 0 auto;}

Compatible Firefox, mais toujours pas IE.

La dernière solution, compatible IE, consiste à utiliser un tableau de mise en forme, à une seule cellule:

<table><tr><td>
...
</td></tr></table>

Merci Florent,
Il ne s'agit pas d'image.Ce sont des blocs avec un titre, une description et une image.
J'aimerai avoir autant de blocs par ligne que peut le permettre la résolution d'écran. Ca ça va, mais le problème c'est que dès que la fenêtre est trop petite pour afficher un bloc de plus, cela fait une marge blanche à droite. J'aimerai donc pouvoir avoir la même marge à gauche et à droite de mon groupe de blocs avec nimporte quelle résolution.
Voila les résultats que ça me fait avec ce que tu me proposes :
Avec le tableau (<table><tr><td align="center">...</td></tr></table>), ça ne fonctionne que sur firefox, mais ça ne m'affiche que maximum 3 blocs par ligne. Sur IE, ca ne change rien, sur Opéra non plus. Le reste non plus ne marche pas.

Voici mon code :

<table><tr><td align="center">
<div style="position:relative;width:100%;">
<div id="contenu_cat">
<div id="nom_catalogue_img"><a href="..."></a></div>
<p>description</p>
<div id="cat1">
<div id="photo_catalogue"><a href="..."></a></div>
</div>
</div>
</div>
</td></tr></table>

(Tout est en dynamique, donc j'ai abrégé)

CSS :
#contenu_cat{
position:relative;
background-color:#ffffff;
border:1px dashed #dddfd4;
margin:5px 5px 5px 1px;
float:left;
width:250px;
height:180px;
}

J'espère être claire...

mar a écrit :
J'espère être claire...

Ce le serait un peu plus en mettant correctement en forme ton code.

Bon, d'après mes tests la solution que je proposais avec un tableau de mise en forme marche très bien avec tous les navigateurs... tant que les flottants restent sur une seule ligne. Dès que ça passe sur deux lignes, le tableau prend 100% de la largeur disponible dans son conteneur et non plus juste la largeur nécessaire à son contenu.

Du coup, à part display: inline-block, je ne vois pas trop ce qui conviendrait...

Je me suis renseignée sur display:inline-block, mais je n'arrive pas à comprendre en quoi ça me serait utile ici. Mes éléments sont déja en ligne, c'est juste l'ensemble de mes éléments que j'aimerai centré.
Est ce que tu pourrais m'en dire plus stp ?

mar a écrit :
Je me suis renseignée sur display:inline-block, mais je n'arrive pas à comprendre en quoi ça me serait utile ici. Mes éléments sont déja en ligne, c'est juste l'ensemble de mes éléments que j'aimerai centré.

Si tes blocs étaient en display: inline-block, tu pourrais les centrer en appliquant un text-align: center à leur parent. Sous réserve de supprimer le float, bien sûr, pour éviter les conflits.