Bonsoir.
Désolé, mon code dois être Horrible mais il fonctionne en partie :
et CSS :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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>
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
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!!!!!
Partager