Warum ist der Knopf nicht zentriert?

Question

Ich dachte, das Hinzufügen eines margin von auto auf ein Element mit einem bekannten width wird ein Element zentrieren, da die Ränder auf beiden Seiten gleich werden. Ich bin mir jedoch nicht sicher, wo ich falsch liege: Wie kann ich diesen Knopf auf der Seite zentrieren?

 p { 
 
      font-family: helvetica, sans-serif; 
 
      font-size: 18px; 
 
     } 
 
     
 
     button { 
 
      background-color: lightblue; 
 
      color: white; 
 
      padding: 15px 32px; 
 
      border-radius: 4px; 
 
      border: 5px solid lightblue; 
 
      
 
     } 
 
     
 
     .upload-button { 
 
      width: 300px; 
 
      margin: 10px auto; 
 
    
 
     } 
 
     
 
     button:hover { 
 
      background: white; 
 
      border: 5px solid lightblue; 
 
      color: lightblue; 
 
     } 
 
     
 
     html, body { 
 
      height: 100%; 
 
     } 
 
     
 
     body { 
 
      width: 960px; 
 
      margin: auto; 
 
     }

<button id="upload-button" class="upload-button" type="button">why is this button not centered</button>

Answer 1

Ein Knopf ist ein Inline-Element standardmäßig, so dass Sie es durch Hinzufügen eines Container div um die Schaltfläche Zentrieren und dass der Behälter eine text-align: center Eigenschaft geben Sie die Taste korrekt auszurichten.

#container { 
 
    text-align: center; 
 
}

<div id="container"> 
 
    <button>Centered button!</button> 
 
</div>

Die margin: 0 auto funktioniert nur, wenn Ihr Element ein Block-Element ist. Sie können also auch display: block zu Ihrer Schaltfläche hinzufügen, um dasselbe zu erreichen. Dies würde der Schaltfläche zwar standardmäßig die volle Breite (100%) geben, Sie müssten sie aber auch mit fix festlegen.

#button1 { 
 
    display: block; 
 
    width: 150px; 
 
    margin: 0 auto; 
 
}

<button id="button1">Centered button!</button>