[Résolu] Mosaïque à nombre d'éléments variable centrée

Bonjour à tous !
Je viens de m'inscrire pour poser ma question, je sais qu'ici on pourra m'aider à résoudre mon problème.

Je voudrais créer pour mon boulot une page contenant une mosaïque qui aurait l'allure suivante:


Avec un HTML qui aurait cette allure là:

<div id="ligne1" class="line">
<div id="cell0" class="cell"></div>
</div>
<div id="ligne2" class="line">
<div id="cell1" class="cell"></div>
<div id="cell2" class="cell"></div>
<div id="cell3" class="cell"></div>
<div id="cell4" class="cell"></div>
<div id="cell5" class="cell"></div>
</div>
<div id="ligne3" class="line">
<div id="cell6" class="cell"></div>
<div id="cell7" class="cell"></div>
<div id="cell8" class="cell"></div>
<div id="cell9" class="cell"></div>
<div id="cell10" class="cell"></div>
</div>
<div id="ligne4" class="line">
<div id="cell11" class="cell"></div>
<div id="cell12" class="cell"></div>
<div id="cell13" class="cell"></div>
<div id="cell14" class="cell"></div>
<div id="cell15" class="cell"></div>
</div>
<div id="ligne5" class="line">
<div id="cell16" class="cell"></div>
<div id="cell17" class="cell"></div>
<div id="cell18" class="cell"></div>
<div id="cell19" class="cell"></div>
<div id="cell20" class="cell"></div>
</div>

Sauf qu'avec le CSS suivant:

.cell
{
	float: left;
	border: solid 1px #000000;
	background-color: #109876;
	margin: 5px;
}
.line
{
	clear: both;
}

...j'obtiens naturellement la chose suivante:



Des text-align: center dans la class "line" ne changent rien.

Donc ma question est : est-il possible de centrer toutes les cellules de ce tableau? De sorte que même si dans une ligne, j'ai 2 cellules, les deux soient également centrées.

Merci d'avance pour votre réponse !
Modifié par NomogoLoula (10 Dec 2008 - 17:02)

Bonjour

Tu peux essayer avec :

.cell
{
	display:inline;
	border: solid 1px #000000;
	background-color: #109876;
	margin: 5px;
}
.line
{
	clear: both;
        display:block;
}

Je n'ai pas testé.

Sinon, pourquoi n'as tu pas fait un tableau ?!

Bonne journée

Merci pour ta réponse MademoiselleL !
Je viens d'essayer en passant les class="cell" en inline, mais du coup je perds les propriétés de taille (width et height) du type block (que j'avais d'ailleurs oubliés de mettre dans les codes de ma question). En revanche, oui, ça me centre bien la cellule du haut, c'est ce que je voulais. Le problème est donc déplacé, mais je peux m'en sortir en remplissant mes div

Pour le tableau, je n'aurais pas trop su me débrouiller correctement pour avoir un nombre de colonnes variables. Mais c'était possible aussi, je n'en doute pas.

En passant : Si c'est pour faire un tableau, utilise les éléments de tableau (table, tr, td), utiliser des div pour créer un tableau c'est pire que d'utiliser un tableau pour la mise en page !

Sinon pour centrer ta cellule des marges auto

et vire tes div line si tu souhaite rester avec une mise en page à l'aide de div, ça allègera ton code.

Je ne sais pas si chaque "cellule" a besoin d'un ID (ça dépend de ton cahier des charges) si ce n'est pas le cas, elève les, ça alourdis le code pour rien.

Bonjour,

Centrer un bloc de largeur connue (pixels ou pourcentages, notamment):

width: 200px; /* par exemple */
margin-left: auto;
margin-right: auto;

Centrer un bloc de largeur inconnue: possible avec un bloc en display:table (et marges automatiques) ou en display:inline-block (et text-align:center sur le conteneur). Mais attention au support de ces propriétés, qui n'est disponible correctement dans IE qu'à partir de... la future version 8.

Yasashii a écrit :
En passant : Si c'est pour faire un tableau, utilise les éléments de tableau (table, tr, td), utiliser des div pour créer un tableau c'est pire que d'utiliser un tableau pour la mise en page !

+1
Modifié par Florent V. (10 Dec 2008 - 16:03)

Woupla !
Je vais devoir potasser vos réponses ^^

Merci à vous trois pour ces infos. Et bonne soirée !