Question

我认为在具有已知margin的元素上添加auto width会使元素居中，因为两边的边距将相等。但是，我不确定我的错误在哪里：如何将此按钮置于页面中心？

＆＃13;

     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;
       }

＆＃13;

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

＆＃13;

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>

为什么按钮不居中？

1 个答案: