web-dev-qa-db-fra.com

Bouton Centre CSS

Problème de centrage CSS habituel, ne fonctionnant pas pour moi, le problème est que je ne connais pas la largeur finie px

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

CSS

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

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

HTML

<div class="nav">
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Home</div>
            <div class="b_right"></div>

        </div>
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Contact Us</div>
            <div class="b_right"></div>

        </div>
</div>

Toute aide serait grandement appréciée. Merci

Résultat

Si la largeur est inconnue, j'ai trouvé un moyen de centrer les boutons, pas tout à fait heureux, mais ça n'a pas d'importance, ça marche: D

Le meilleur moyen est de le mettre dans un tableau

<table class="nav" align="center">
    <tr>
      <td>
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Home</div>
            <div class="b_right"></div>
        </div>

        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Contact Us</div>
            <div class="b_right"></div>
        </div>
      </td>
    </tr>
  </table>
cssbuttoncenter
63
Stevanicus

Je me rends compte que c’est une très vieille question, mais j’ai trébuché sur ce problème aujourd’hui et j’ai eu l’occasion de le faire fonctionner.

<div style="text-align:center;">
    <button>button1</button>
    <button>button2</button>
</div>

Cordialement, Mark

166
markbaldy

Une autre option intéressante consiste à utiliser:

width: 40%;
margin-left: 30%;
margin-right: 30%
19
Rani

Le problème concerne la ligne CSS suivante sur .nav_button:

margin: 0 auto;

Cela ne fonctionnerait que si vous aviez un bouton, c'est pourquoi ils sont décentrés quand il y a plus d'un nav_button div.

Si vous voulez que tous vos boutons soient centrés, imbibez le nav_buttons dans un autre div:

<div class="nav">
    <div class="centerButtons">
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Home</div>
            <div class="b_right"></div>
        </div>
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Contact Us</div>
            <div class="b_right"></div>
        </div>
    </div>
</div>

Et le style de cette façon:

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

/* Centers the div that nests the nav_buttons */
.centerButtons {
    margin: 0 auto;
    float: left;
} 

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

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

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

quand tout le reste échoue je viens

<center> content </center>

Je sais que ce n'est plus "conforme aux normes", mais si cela fonctionne, cela fonctionne

1
ott