<div>
<button>Button</button>
</div>
Ich möchte keine CSS-Codes zum div-Element hinzufügen. Also <div style="text-align: center;"> ist nicht was ich will. Ich möchte nur CSS-Codes zum Button-Element hinzufügen. Ich möchte keine JS-Codes hinzufügen. CSS3 kann verwendet werden. Vielen Dank!Wie kann ich ein Button-Element horizontal in der Center-Ausrichtung in einem div-Element anzeigen lassen?
button {
margin:0 auto;
display:block;
}
Sie benötigen display: block; margin: auto; auf dem <button>. jsFiddle
Ich habe eine Frage. Das Blockelement verwendet die volle Breite des übergeordneten Elements. Siehe http://jsfiddle.net/xmpDD/1. Warum verwendet das Schaltflächenelement nicht die gesamte Breite des Elements div? Die Wahrheit ist, dass die Breite des Button-Elements 54 Pixel beträgt. Ich kann das nicht verstehen. Vielen Dank! – weilou
@weilou Tatsächlich erhalten Elemente auf Blockebene nicht unbedingt die Breite ihrer Eltern. Ihre kombinierte Breite, Ränder und Auffüllung entsprechen der Breite ihres übergeordneten Elements. Hoffe es hat geholfen! –
Vielen Dank! Phillip. Dein Kommentar hilft mir! – weilou
Andere haben bereits die margin: 0 auto; Methode, aber wenn Sie eine Erklärung wollte, teilt sich der Browser in den verfügbaren Platz, was auch immer Container Ihr Element ist in.
Ebenfalls wichtig ist, dass Sie werden wahrscheinlich darauf hinweisen, müssen Sie Ihrem Element auch eine Breite geben, damit es richtig funktioniert.
Also, insgesamt:
button {
display:inline-block; //Typically a button wouldn't need its own line
margin:0 auto;
width: 200px; //or whatever
}
Wenn Sie dies in der realen Welt verwenden, müssen Sie die Spezifität, dass erhöhen, wenn Sie auf die Schaltfläche Element überall zentriert werden soll. –
Ich habe eine Frage. Das Blockelement verwendet die volle Breite des übergeordneten Elements. Siehe http://jsfiddle.net/xmpDD/1. Warum verwendet das Schaltflächenelement nicht die gesamte Breite des Elements div? Die Wahrheit ist, dass die Breite des Button-Elements 54 Pixel beträgt. Ich kann das nicht verstehen. Vielen Dank! – weilou
Ist die '0' eigentlich notwendig? 'margin: auto;' scheint in FF, IE und Chrome zu funktionieren. –