28172 sujets

CSS et mise en forme, CSS3

Centrer des éléments flotants

Bonjour,

Je souhaiterai centrer plusieurs éléments flottants contenus dans une DIV.

J'ai trouvé pour cela une méthode plutôt efficace en cherchant dans vos forums (par contre j'avais trouvé cela il y'a quelques temps déjà, et je ne retrouve plus le topic).

Cette méthode fonctionne parfaitement, tant que les éléments se trouvent sur une ligne, mais dès que rajoute d'autres éléments et qu'ils occupent plus d'une ligne, alors le centrage ne fonctionne plus et les éléments se retrouvent collés à gauche de l'écran.

Voici le CSS :

		.nav-menu-div {
		text-align:center;
		}
		
		.nav-menu-div ul {
		text-align:left;
		display:table;/* ff2 */
		margin:auto;
		display:inline-block; /* ff3 , opera , etc ...  voir CC pour IE */
		}
		.nav-menu-div li {
		display:inline;/* vire les puces */
		width:200px;
		float:left;
		padding:0 1em;
		margin:5px;
		
		border:1px solid blue;
		}


Et voici le HTML :


<body>
<div class="nav-menu-div">
 	<ul class="list_tb"> 
    	<li>
        	<a class="title" href="#"> 
            <span>titre</span>
            </a>
            <p class="desc">Description Description Description Description </p>
            <p class="tlink" style="float: left;">
              <a href="#">Popularity:</a> 00000
            </p>
            <p class="tlink" style="float: right;">
              <a href="#">More</a>
            </p>
         </li>

    	<li>
        	<a class="title" href="#"> 
            <span>titre</span>
            </a>
            <p class="desc">Description Description Description Description </p>
            <p class="tlink" style="float: left;">
              <a href="#">Popularity:</a> 00000
            </p>
            <p class="tlink" style="float: right;">
              <a href="#">More</a>
            </p>
         </li>

    	<li>
        	<a class="title" href="#"> 
            <span>titre</span>
            </a>
            <p class="desc">Description Description Description Description </p>
            <p class="tlink" style="float: left;">
              <a href="#">Popularity:</a> 00000
            </p>
            <p class="tlink" style="float: right;">
              <a href="#">More</a>
            </p>
         </li>
    </ul>
 </div>
</body>


Je ne comprend pas d'où peux venir ce bug, mais a priori centrer des éléments flottant en CSS n'est pas une chose aisée.

Pourriez vous m'aider, en m'indiquant si je suis sur la bonne voie, ou bien si je devrais plutôt utiliser une autre méthode ? (Peut être avec du JS, mais cela m'arrangerai de trouver une solution en full CSS sans JS et sans table)

Merci d'avance!
Je ne suis pas certain de ce que tu veux faire. Je ne suis pas convaincu de la méthode exposée, j'ignore où tu l'as trouvé mais display:inline pour faire disparaître les puces au lieu de list-style:none me fait douter de l'exemple.

Le display:inline-block, de ce que j'en sais, il fonctionne uniquement, dans IE, pour les balises qui sont "natives" inline. Donc un inline-block sur un <span> fonctionnerait mais pas sur un <ul> qui est, par défaut, un block.

Donc voilà, j'aimerais bien savoir ce que tu cherches à faire exactement. Est-ce que tu veux 3 éléments flottants sur la première ligne et le 4ième centré, par exemple ?

Merci pour tes éventuels détails
Bonsoir, merci pour votre réponse.

Oui effectivement le display:inline; pour faire disparaitre les puces n'est pas très logique, je me suis contenté de copier/coller ce code.

Et il est vrai que je me suis peut être mal exprimé pour exposer mon problème, voici que je souhaite faire :

Je voudrai afficher plusieurs éléments (des thumbs de sites) dans une DIV centrale, laquelle a une taille 100% et s'adapte à la résolution de l'écran du visiteur. Ainsi le nombre de colonnes peut varier selon la résolution, mais je souhaiterais que ces éléments restent centrés dans la DIV.

Les éléments en question sont des <li> contenus dans un <ul>, et on la propriété float:left, pour être affichés cote à cote.

La méthode que j'ai utilisé fonctionne pour un petit nombre d'éléments (lorsqu'ils ne prennent qu'une ligne), mais dès que j'augmente leur nombre cela ne fonctionne plus, et ils restent collé à gauche.
Vous pouvez faire le test vous même en utilisant le code que j'ai posté dans mon premier message, vous verrez que les <li> sont centré, mais si vous éditez le code HTML et ajoutez d'autres <li> cela ne marche plus.

J'aimerai comprendre pourquoi, ou bien trouver une autre solution.

Merci


edit: je joint une image pour illustrer mes propos.
Les éléments que je souhaite centrer sont les carrés bleu au milieu
upload/19118-exemple.jpg
Modifié par TheDoGG (25 Jan 2010 - 21:43)
bonsoir,

si cette page test t'amuse et t'apporte quelques pistes :
http://gcyrillus.free.fr/essai/float-center.html

c'est basé sur des listes et sans flottement , elle ce centre en fonction de la largeur disponible que laisse le conteneur et passe a la ligne au besoin .(ici body , mais ça peut-etre un autre conteneur)

Délicat a mettre en place et difficile a reprendre quelques semaines plus tard.

Sinon float n'est pas compatible avec margin :auto; ou texte-align ou vertical-align pour ce qui est des centrages en general.

GC
Bonsoir,

Merci pour votre réponse, cette méthode répond parfaitement à mon problème, et j'ai réussi à obtenir le résultat que je souhaitais.

Un grand merci Smiley biggrin
Re-bonjour,

Maintenant que j'ai réussi à centrer ma galerie, j'aimerai savoir s'il est possible d'assigner des marges dynamique, c'est a dire que les marges entre les thumbs et les cotés soient toujours les même.

Cela est-il possible en CSS, ou bien doit-on utiliser du javascript ?

Merci d'avance
Sujet clos
Aller à