Après de multiples recherches sans succès pour faire ça en pur CSS, voici un code jQuery permettant de régler les margin-left et margin-right sur des div de même taille en float.
L'idée est de retrouver le comportement d'une table (éléments centrés dans les td) tout en acceptant un nombre maximum d’éléments par ligne affichée selon la résolution de l'écran (ou plus généralement de la taille de la fenêtre).
Il faut créer une div principale (ici bodyContainer) dans laquelle vous placez vos div à center.
Code HTML:
[div id="bodyContainer"]
[div class="mosaicDiv"]Texte1[/div]
[div class="mosaicDiv"]Texte2[/div]
[div class="mosaicDiv"]Texte3[/div]
[div class="mosaicDiv"]Texte4[/div]
[div class="mosaicDiv"]Texte5[/div]
[div class="mosaicDiv"]Texte6[/div[
[div class="mosaicDiv"]TexteN[/div[
[/div]
note: remplacer [] par <>
Code CSS :
#bodyContainer{width:100%;}
.mosaicDiv{position:relative; float:left; width:300px; background-color:blue; color:white;}
Code JavaScript (jQuery)
function doMosaic() {
var nbElt = $("#bodyContainer > div").size();
if (nbElt >= 1) {
var eltWidth = $("#bodyContainer div:first-child").width();
var scrWidth = $("#bodyContainer").innerWidth();
var nbEltMax = Math.floor(scrWidth / eltWidth);
var eltUsed = (nbElt > nbEltMax) ? nbEltMax : nbElt;
var availWidth = scrWidth - (eltUsed * eltWidth);
var margin = Math.round((availWidth / eltUsed)/2)-eltUsed;
$("#bodyContainer > div").css("margin-left",margin);
$("#bodyContainer > div").css("margin-right",margin);
}
}
J'imagine que vous pourrez faire plus court.if (nbElt >= 1) {
var eltWidth = $("#bodyContainer div:first-child").width();
var scrWidth = $("#bodyContainer").innerWidth();
var nbEltMax = Math.floor(scrWidth / eltWidth);
var eltUsed = (nbElt > nbEltMax) ? nbEltMax : nbElt;
var availWidth = scrWidth - (eltUsed * eltWidth);
var margin = Math.round((availWidth / eltUsed)/2)-eltUsed;
$("#bodyContainer > div").css("margin-left",margin);
$("#bodyContainer > div").css("margin-right",margin);
}
}
Il vous suffit ensuite de lier ce code à votre page principale pour obtenir un réglage lors des resize :
$(window).resize(function() {doMosaic();}); Si quelqu'un a une solution full CSS, je suis preneur...
