Centrage image vertical

(reprise du message précédent)

Pourquoi ne pas créer 2 blocs contenant pour le premier les 4 premières images et pour le deuxième les 2 dernières. Avec table-cell ça reste simple.

Ce n'est pas aussi simple
Car la c'est fixe pour maquettage mais le nombre de blocs ca va être dynamique.
Et potentiellement la largeur du centre ne sera plus fixe non plus.

Il est donc impossible de se passer des &nbsp ?

Je suis désolé mais je suis un peu perdu dans votre problème.

Pouvez-vous synthétiser votre demande et au besoin ajouter des images afin d'en faire un screen.

Voici une image qui explique :

Donc les petits blocs vert sont de taille égale (normalement mais je dessine mal ).

Le nombre de blocs par ligne est variable de manière dynamique et la largeur du conteneur peut aussi être amené à varier.

Ils contiennent soit :
- une image + un texte
- une image

Les images peuvent être de taille variée mais jamais plus de 130px de long (elle ne sorte pas des boites verts quoi).

Mais je veut quelles soient centré verticalement (avec ou sans texte).
Actuellement ça fonctionne car elles ont toutes un texte (celle qui n'en ont pas possède un  ).

Je souhaite donc me passer de   pour avoir le même fonctionnement

Merci.

Salut,
Je vois 2 solutions, mais il faut ajouter une div intermédiaire :

<div id="contenu">
    <div class="flottante"><div><img alt="I1" width="250" height="250" src="I1.png">I1</div></div>
    <div class="flottante"><div><img alt="I2" src="I2.png">I2</div></div>
    <div class="flottante"><div><img alt="I3" src="I3.png">  </div></div>
    <div class="flottante"><div><img alt="I3" src="I3.png">  </div></div>
    <div class="flottante"><div><img alt="I3" src="I3.png">  </div></div>
    <div class="flottante"><div><img alt="I3" src="I3.png">I3</div></div>
</div>

1) flottantes en inline-block, div en table-cell avec dimensions

.flottante {
  background-color: #ccc;
  border-bottom-style: solid;
  display: inline-block;
  vertical-align: top; /* ou autre */
}
.flottante>div{
  display: table-cell;
  height: 100px;
  width: 180px;
  vertical-align: middle;
  text-align: center;
}

2) flottante en inline table, div en table-cell. Ici, on pourra mettre les dimensions sur l'un ou l'autre. Avantage ? Je n'en ai pas la moindre idée

.flottante {
  background-color: #ccc;
  border-bottom-style: solid;
  display: inline-table;
  vertical-align: top; /* itou */
  height: 100px;
  width: 180px;
}
.flottante>div{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

++

Ah en effet ça marche comme ceci

Merci.

Edit : Arf sauf sous IE (8 et 10) cela rend tout bizarre
Modifié par cerede2000 (04 Jan 2013 - 17:57)