ボタンが中央にないのはなぜですか？

Question

私は、を持つ要素にautoのmarginを追加すると、要素の中央になると考えました。これは、両側の余白が等しくなるためです。しかし、どこに間違っているのか分かりません。どうすればこのボタンをページの中央に置くことができますか？

 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

ボタンは、デフォルトではインライン要素であるので、あなたはボタンの周りの容器divを追加することによって、それを中央にして、そのコンテナに正しくボタンを揃えるtext-align: center性を付与することができます。

#container { 
 
    text-align: center; 
 
}

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

margin: 0 autoあなたの要素はブロックレベル要素である場合にのみ機能します。したがって、同じことを達成するためにボタンにdisplay: blockを追加することもできます。これにより、デフォルトではフル・ワイド（100％）になりますが、固定値を与える必要があります。

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

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