[Résolu] Alignement réactif de 10 blocs en 5 colonnes et 2 lignes

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

<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 :

.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!!!!!
Modifié par josse34 (29 Jan 2016 - 16:49)

Cette solution résout ce sujet, merci!!!