28173 sujets

CSS et mise en forme, CSS3

Centrer un nombre variable d'éléments horizontalement

Bonjour,

je cherche à effectuer la chose suivante.
- j'ai une div nommé contenu qui contient le contenu de mon site. elle est centrée dans le body et est de largeur fluide.
- dans cette div je mets des divs (disons une dizaine) nommée "seq" qui sont de largeur fixe de 200px.

Ce que je souhaite c'est que ces div "seq" se mettent les une à la suite des autres. Donc ça c'est facile avec un float:left !

Mais ce que je voudrais c'est qu'une ligne de ces divs se centre dans le "contenu".
J'explique : imaginons qu'il loge 3 divs "seq" en largeur, au lieu qu'elles s'alignent à partir du bord gauche, je voudrais qu'elles se centrent dans le div "contenu"
Idem si on agrandit la fenetre du navigateur, donc la taille de "contenu" et qu'il loge 4 "seq" en largeur.

Si on englobe les divs "seq" d'une ligne dans une autre div on pourrait centrer avec des margin auto. mais la largeur de cette div n'est pas fixe puisqu'il peut y avoir 2,3 ou plus d'éléments dedans. donc ça marche pas.

Auriez vous une solution ?
merci
Modérateur
bonjour/bonsoir

A coup de balise supplementaires , de modifications du comportement par defaut des differentes balises , on peut arriver a faire un truc du genre (qui ne passe pas forcement partout : IE et firefoxe , a peu prés equivalent (encore que ...) , opera commence a decrocher et safari pour windows est insensible a la bidouille.
gabarit test :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>XHTML 1.0 Strict : centrage d'element block comme "text-align:center;".</title>
<!--[if  IE  7]>
<style type='text/css'>
div div div {min-width:100px;width:auto!important;height:auto!important;min-height:100px;}
</style>
<![endif]-->
<style type='text/css'>
div.aligneur {border:1px solid;padding:5px;text-align:center;width:500px;margin:auto;overflow:hidden;}
div div {display:inline;border:0;text-align:center;margin:5px;}
div div div {display:table-cell;width:100px;border:1px solid;height:100px;zoom:1;}
div div div p {width:130px;}
</style>
</head>
<body>
<div class="aligneur">

<div><div><p>Zone ou section</p></div></div>
<div><div><p>Zone ou section</p></div></div>
<div><div><p>Zone ou section</p></div></div>
<div><div><p>Zone ou section</p></div></div>
<div><div><p>Zone ou section</p></div></div>
<div><div><p>Zone ou section</p></div></div>
<div><div><p>Zone ou section</p></div></div>
<div><div><p>Zone ou section</p></div></div>
<div><div><p>Zone ou section Zone ou section Zone ou section</p><p>Zone ou section Zone ou section Zone ou section</p></div></div>
<div><div><p>Zone ou section</p></div></div>
<div><div><p>Zone ou section</p></div></div>

</div></body></html>

ce gabarit en ligne : http://gcyrillus.free.fr/essai/block-inline_align_center.html

Maintenant , est ce utilisable , allegable , peut-etre ... mais attention aux prises de têtes Smiley smile .

gc
Sujet clos
Aller à