Comment centrer les boutons avec un div?

J'ai le code suivant et j'essaie de centrer toutes les entrées dans le div.Comment centrer les boutons avec un div?

Voici les CSS Snippets:

#mainCalc label { 
    display: inline; 
    width: 8em; 
    text-align: right; 
    padding-right: 1em; 
     float: left; } 

#mainCalc input { 

    display: inline;   
    float: left; } 

#mainCalc br { 
    clear: left;

Voici le code HTML Snippet:

<div id="mainCalc"> 
    <input type="button" id="dollar" value="Dollar" /> 
    <input type="button" id="quarter" value="Quarter" /> 
    <input type="button" id="dime" value="Dime" /> 
    <input type="button" id="nickel" value="Nickel" /> 
    <input type="button" id="refund" value="Refund" /><br /> 
    <label for="amount">$</label> 
    <input type="text" id="amount" /><br/> 
    <input type="button" id="coke" value="Coke" /> 
    <input type="button" id="dietCoke" value="Diet Coke" /> 
    <input type="button" id="mountainDew" value="Mountain Dew" /> 
    <input type="button" id="drPepper" value="Dr. Pepper" /> 
    <input type="button" id="rootBeer" value="Root Beer" /> 
    <input type="button" id="water" value="Water" /> <br /><br /> 
</div>

Source

2013-04-01 user2101459

Avez mon travail de réponse? Veuillez cocher/upvote si c'est le cas pour en informer les autres. Sinon, laissez-moi savoir si ce n'est pas le cas, alors je peux le supprimer! merci – lifetimes

Vous devez donner les entrées une largeur, puis vous devez supprimer la float et ajouter une marge: 0 auto.

input{ 
width: 200px; 
margin: 0 auto; 
display: block; 
}

Exemple de travail:

http://jsfiddle.net/DYgnU/2/

Source

2013-04-01 21:37:47

margin-left: auto; 
margin-right: auto;

Source

2013-04-01 21:39:02

Cet appartement ne fonctionnera pas. –

Je viens de remplacer votre ligne de marge par la mienne, et c'était la même chose. –

ce n'est pas la marge qui pose problème. À moins que vous définissiez une sorte de largeur, les éléments ne seront pas centrés. –

Vous pouvez ajouter:

#mainCalc { 
    text-align: center; 
}

et retirez le float: left; de #mainCalc label & #mainCalc input

Demo

Source

2013-04-01 21:40:15 DarkAjax

c'était un excellent conseil, merci! – user2101459

@ user2101459 Génial! Rappelez-vous qu'il est toujours agréable de voter pour des réponses qui vous aident ... – DarkAjax

@ user125697 Wow, en effet, mon pote, c'est dommage. Ces situations devraient vraiment changer ... – DarkAjax

Comment centrer les boutons avec un div?

Répondre

Questions connexes