Alignement réactif de 10 blocs en 5 colonnes et 2 lignes

Version imprimable

Bonsoir.
Désolé, mon code dois être Horrible mais il fonctionne en partie :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <div class="diapcentre"> <div class="diapgauche2"> <img src="images/Images/DEV/DEV1.jpg"/> <div class="diapcentre"> BLABLA </div> </div> <div class="diapgauche2"> <img src="images/Images/DEV/DEV2.jpg"/> <div class="diapcentre"> BLABLA </div> </div> <div class="diapgauche2"> <img src="images/Images/DEV/DEV3.jpg"/> <div class="diapcentre"> BLABLA </div> </div> <div class="diapgauche2"> <img src="images/Images/DEV/DEV4.jpg"/> <div class="diapcentre"> BLABLA </div> </div> <div class="diapgauche2"> <img src="images/Images/DEV/DEV5.jpg"/> <div class="diapcentre"> BLABLA </div> </div> </div>
et CSS :
Code:

1 2 3 4 5 6 7 .diapcentre { text-align: center; } .diapgauche2 { float:left; }
Mon besoin se porte sur le fait d'aligner au centre 5 blocs par rapport à la page et d'ajouter un texte en dessous de chaque bloc, centré par rapport à son bloc du dessus de sorte à faire en pleine largeur :

IMG1 IMG2 IMG3 IMG4 IMG5
TEX1 TEX2 TEX3 TEX4 TEX5

et de façon réactive tablette par exemple :

IMG1 IMG2 IMG3
TEX1 TEX2 TEX3
___IMG4 IMG5
___TEX4 TEX5

et de façon réactive smartphone par exemple :

IMG1
TEX1
IMG2
TEX2
IMG3
TEX3
IMG4
TEX4
IMG5
TEX5

Le code fourni ci-dessus gère tout cela très bien mais impossible de centrer cet ensemble de blocs au centre de la page, ça reste sur la gauche.
Par quoi remplacer .diapgauche2 {float:left;} sachant qu'un float middle ou center n'existe pas?!!

EDIT : je viens également de voir que le texte BLABLA si plus long ne fais de retour à la ligne pour respecter la largeur du bloc du dessus! Je suis mal barré!!!

Merci!!!!!

Bonjour,

ça va bien aussi avec les bonnes balise HTML5 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="diapcentre">
  <figure>
    <img src="http://www.developpez.net/template/images/logo.png" />
    <figcaption>
      BLABLA 1
    </figcaption>
  </figure>
  <figure>
    <img src="http://www.developpez.net/template/images/logo.png" />
    <figcaption>
      BLABLA 2
    </figcaption>
  </figure>
  <figure>
    <img src="http://www.developpez.net/template/images/logo.png" />
    <figcaption>
      BLABLA 3
    </figcaption>
  </figure>
  <figure>
    <img src="http://www.developpez.net/template/images/logo.png" />
    <figcaption>
      BLABLA 4
    </figcaption>
  </figure>
  <figure>
    <img src="http://www.developpez.net/template/images/logo.png" />
    <figcaption>
      BLABLA 5
    </figcaption>
  </figure>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
 .diapcentre {
   text-align: center;
 }
 .diapcentre > figure {
   float: left;
   padding: 0;
   margin: 0;
 }
 .diapcentre > figure img {
   width: 100%;
 }

Responsive :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* desktop */
@media screen and (min-width:1024px) {
 .diapcentre > figure {
   width: 20%;
 }
}
/* tablet */
@media screen and (min-width:641px) and (max-width:1023px) {
 .diapcentre > figure {
   width: 33.33%;
 }
}
/* phone */
@media screen and (max-width:640px) {
 .diapcentre > figure {
   width: 50%;
 }
}

29/01/2016, 17h56
josse34
Pas mal du tout ça!!!!
Deux critiques :
- Ca ne centre pas les blocs qui passent en dessous lors du réactif.
- Ca m’intègre le contenu qui suit cet ensemble de bloc, je vais tenter un clear:both = résolut via l'ajout de <div style="clear:both;"></div>
Merci!
01/02/2016, 09h42
Inikaam

Bonjour josse34,

Si tu n'as pas d'impératif que tes éléments soient précisément collés les uns aux autres, je te conseilles d'envisager le display inline-block plutôt que le float left, tu as plus de chances d'obtenir le résultat que tu recherches.

Un float sera toujours du côté indiqué, donc jamais centré.

edit : si tu n'as pas d'impératif de compatibilité, essaie les propriétés du display flex, c'est pas mal non plus :)
01/02/2016, 10h41
Invité
Bonjour,

avec centrage, quelques modif. de mon code ci-dessus : http://codepen.io/jreaux62/pen/mVKNyj
Code:

1 2 </figure><figure>
Code:

1 2 3 4 5 .diapcentre > figure { display: inline-block; padding: 0; margin: 0; }
N.B. On ajoute  pour supprimer l'espace dû au inline(-block).
02/02/2016, 10h18
josse34

Mille merci mais avec ces modifications, c'est chaque ensemble image et texte qui se centrent, je préfère la précédente version ou les images sont centrées entre elles et le texte en dessous.

bonjour,

une solution : http://codepen.io/jreaux62/pen/WrKyxG

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.diapcentre {
   text-align: center;
 }
 
 .diapcentre > figure {
   position: relative;
   display: inline-block;
   padding: 0;
   margin: 0;
   margin-bottom: 70px; /* hauteur légende + 20px */
   border: 1px dotted #ccc;
   box-sizing: border-box; /* nécessaire à cause du border */
 }
 
 .diapcentre > figure img { /* image */
   display: inline-block;
   max-width: 100%;
   max-height: 200px;
 }
 
 .diapcentre > figure figcaption { /* légende */
   position: absolute;
   width: 100%;
   bottom: -50px;
   height: 50px;
 }
 /* desktop */
 @media screen and (min-width:1024px) {
   .diapcentre > figure {
     width: 20%;
   }
 }
 /* tablet */
 @media screen and (min-width:641px) and (max-width:1023px) {
   .diapcentre > figure {
     width: 33.33%;
   }
 }
 /* phone */
 @media screen and (max-width:640px) {
   .diapcentre > figure {
     width: 50%;
   }
 }