Centre Bouton CSS

Usual problème de centrage CSS, juste ne fonctionne pas pour moi, le problème est que je ne sais pas la largeur finie pxCentre Bouton CSS

J'ai un div pour l'ensemble de navigation, puis chaque bouton à l'intérieur, ils ne centre plus 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 d'un centre les boutons, pas tout à fait heureux, mais n'a pas d'importance, ça marche: D

La meilleure façon est de le mettre dans une table

<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>

Source

2010-09-01 Stevanicus

113

Je sais que c'est une question très ancienne, mais je suis tombé à travers ce problème aujourd'hui et je l'ai eu à travailler avec

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

Cheers, Mark

Source

2012-10-15 03:15:55 markbaldy

A travaillé comme un charme. Kudos @markbaldy – andy4thehuynh

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

margin: 0 auto;

cela ne fonctionnerait que si vous aviez un bouton, c'est la raison pour laquelle ils sont décentré quand il y a plus d'un nav_button divs.

Si vous voulez que tous vos boutons centrés imbriquer 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; 
}

Source

2010-09-01 23:21:58 Espresso

merci pour votre poste, malheureusement ne fonctionne pas non plus, toujours tout sur la gauche. – Stevanicus

Ouais, je viens de le réaliser. C'est parce que le .centerButtons est un élément de bloc et il prend tout l'espace dans .nav, rendant les propriétés de marge inutiles. J'ai essayé de le réparer en flottant .centerButtons, mais pas de chance. – Espresso

oui je sais que c'est un délicat, m'énerve parce que je l'ai déjà fait mais je ne peux pas me rappeler comment:) .... des idées? – Stevanicus

quand je reste échoue juste

<center> content </center>

Je sais que ce ne est pas « aux normes » plus, mais si cela fonctionne, il fonctionne

Source

2013-05-21 15:22:02 ott

Cette réponse n'ajoute rien aux autres réponses. '

' était obsolète en HTML4 et n'est même pas supporté en HTML5, ce qui signifie qu'il ne fonctionnera probablement pas si HTML5 est utilisé. – Magnilex

Je ne l'utilise que si je ne peux rien faire d'autre. Je l'ai utilisé dans des pages où il y a html5 mais je préfère ne pas le faire. J'ai traversé et remplacé ce que je pouvais avec '

button

' – ott

Une autre option intéressante est d'utiliser:

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

Source

2016-08-24 08:05:09 Rani

Centre Bouton CSS

Répondre

Questions connexes