Centrer horizontalement plusieurs div dans un div principal

[Résolu/Fermé]
Signaler
-
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
-
Bonjour,

Je me prends un peu la tête sur l'affichage d'une liste de pays avec un habillage css, je n'arrive pas à centrer mes pays dans un div principal (largeur fixe).

Voici mon code :

CSS :


#boxResultat #boxPays
{
float:left;
height:auto;
width:880px;
text-align: center;
}

#pays
{
float: left;
height:auto;
width: auto;
padding: 2px 10px;
margin: 2px 2px;
border-radius: 20px;
background-color: #bfbfbf;
font-family:"Myriad W01 Regular";
color:#FFF;
font-size:16px;
}

HTML / PHP :


echo ' <div id="boxPays">';

while( $data = mysql_fetch_assoc($req) ) {
echo '<div id="pays">'.$data['nom'].'</div>';
}

echo '</div>';

J'ai bien essayé de remplacer mes div #pays par des span en transformant en class et en retirant quelques arguments tels que le float: letf; mais ça ne marche pas...

Quelqu'un aurai une idée ? Je ne peux pas insérer d'image pour vous montrer le rendu mais c'est tout simplement comme si j'avais des mots avec un text-align: left; alors que je l'aimerais centrer.

Merci à toutes et à tous.

A voir également:

4 réponses

#divacentrer{
display:inline-block;
width:200px;
left:50%;
margin-left:-100px;
}

Voila, 200px/-100px a changer selon la taille désirer
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41989 internautes nous ont dit merci ce mois-ci

Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
697
#boxPays /***centrée***/
{
position:relative;
height:auto;
width:880px;
margin:auto;
}

le résultat de requète sql affiche-il plusieurs div #pays ?

si c'est le cas il faudrait plutôt une class .pays
et la le reste du code serait

.pays
{
display:inline-block;
height:auto;
width: auto;
padding: 2px 10px;
margin: 2px auto;
border-radius: 20px;
background-color: #bfbfbf;
font-family:"Myriad W01 Regular";
color:#FFF;
font-size:16px;
}


Messages postés
78
Date d'inscription
lundi 11 juillet 2011
Statut
Membre
Dernière intervention
1 janvier 2020
86
Bonjour animostab

Super pour la class ! Ca fonctionne parfaitement, je n'avais pas pensé au display:inline-block; !

Merci beaucoup pour votre aide.
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
697
pas de quoi
@+