wake-up-neo.com

Wie kann ich ein Schaltflächenelement in einem div-Element horizontal zentrieren?

Ich möchte meinem div-Element kein CSS hinzufügen (z. B. <div style="text-align: center;">). Ich möchte dem Schaltflächenelement nur CSS-Code hinzufügen.

<div>
    <button>Button</button>
</div>

Wie kann ich in diesem Fall die Taste horizontal zentrieren?

31
weilou
button {
    margin:0 auto;
    display:block;
}
button {
  margin: 0 auto;
  display: block;
}
<div>
  <button>Button</button>
</div>
80
j08691

Andere haben bereits die margin: 0 auto;-Methode, aber wenn Sie eine Erklärung wünschen, teilt der Browser den verfügbaren Speicherplatz in den Container auf, in dem sich Ihr Element befindet.

Es ist auch wichtig darauf hinzuweisen, dass Sie wahrscheinlich auch Ihrem Element eine Breite geben müssen, damit dies korrekt funktioniert.

Insgesamt also:

button {
    display:inline-block; //Typically a button wouldn't need its own line        
    margin:0 auto;
    width: 200px; //or whatever
}
4
Phillip Schmidt

Du brauchst display: block; margin: auto; auf der <button>. jsFiddle

3
dezman