107 votes

Bouton Centre CSS

Problème de centrage CSS habituel, cela ne fonctionne tout simplement pas pour moi, le problème est que je ne connais pas la largeur finale en px

J'ai une div pour toute la navigation et ensuite chaque bouton à l'intérieur, ils ne sont plus centrés lorsqu'il y a plus d'un bouton. :(

.nav {
  margin-top: 167px;
  width: 1024px;
  height: 34px;
}

.nav_button {
  height: 34px;
  margin: 0 auto;
  margin-right: 10px;
  float: left;
}

    Accueil

    Contactez-nous

Toute aide serait grandement appréciée. Merci


Résultat

Si la largeur est inconnue, j'ai trouvé un moyen de centrer les boutons, je ne suis pas entièrement satisfait mais peu importe, ça fonctionne :D

La meilleure solution est de le mettre dans un tableau

            Accueil

            Contactez-nous

235voto

markbaldy Points 366

J'ai rencontré ce problème aujourd'hui et j'ai réussi à le résoudre avec

    button1
    button2

74voto

Amin Points 121

Considérez ajouter ceci à votre CSS pour résoudre le problème :

button {
    margin: 0 auto;
    display: block;
}

25voto

Rani Points 231

Une autre option intéressante est d'utiliser :

largeur: 40%;
marge-gauche: 30%;
marge-droite: 30%

11voto

Espresso Points 2630

Le problème se situe dans la ligne de CSS suivante sur .nav_button:

margin: 0 auto;

Cela ne fonctionnerait que si vous aviez un seul bouton, c'est pourquoi ils sont décentrés lorsqu'il y a plusieurs divs nav_button.

Si vous voulez centrer tous vos boutons, imbriquez les nav_buttons dans une autre div:

            Accueil

            Contactez-nous

Et stylisez-le de cette manière:

.nav{
    margin-top:167px;
    width:1024px;
    height:34px;
}

/* Centre la div qui contient les nav_buttons */
.centerButtons {
    margin: 0 auto;
    float: left;
} 

.nav_button{
    height:34px;
    margin-right:10px;
    float: left;
}

2voto

Israr Awan Points 45

Considérez d'ajouter ceci à votre CSS pour résoudre le problème :

.btn {
  width: 20%;
  margin-left: 40%;
  margin-right: 30%;
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X