html - 按钮不会以 HTML 形式对齐

Question

所以我这里有一个看起来不错的表单，只是底部的按钮不能正确居中。最终结果是应该居中、水平放置的按钮，这些按钮稍微间隔开，就像您通常在表单上看到的那样。

不过，我制作的那个没有正确居中。我确定我只是在这里遗漏了一些愚蠢的东西，但是有人可以帮助纠正这个问题吗？

HTML

<div id="contact_form">
  <form name="contact" id="contact" method="post" action="submit_form.php">
      <p>Title</p>
         <label>
            <span>Name: </span><input name="name" id="name" placeholder="Full Name" type="text" autofocus required />
         </label>

         <label>
         <span>Email: </span><input name="email" id="email" placeholder="Email Address" type="email" required />
                     </label>

                     <label>
                        <span>Subject: </span>
                        <select name="selection">
                           <option value="1">Option 1</option>
                           <option value="2">Option 2</option>
                           <option value="3">Option 3</option>
                           <option value="4">Option 4</option>
                           <option value="5">Option 5</option>
                           <option value="6">Option 6</option>
                           <option value="7">Option 7</option>
                        </select>
                     </label>

                     <label>
                        <span>Message: </span><textarea name="message" id="message" placeholder="Your Message" required></textarea>
                     </label>

                  <button class="send" type="submit" name="submit" value="submit">Submit</button>
                  <button class="clear" type="reset" name="clear" value="clear">Reset</button>
               </form>
            </div>

CSS

#contact_content{
   background-color: lightgrey;
   margin-left: 1rem;
   margin-right: 1rem;
   border-radius: 20px 20px 20px 20px;
   padding-bottom: 3rem;
   padding-top: 1rem;
   padding-left: 1rem;
   padding-right: 1rem; 
}

#contact_content h1{
   background-color: black;
   border-radius: 20px 20px 20px 20px;
   padding: .5rem;
   margin-bottom: 2rem;
}

#contact_form p{
   text-align: center;
   padding: 1rem;
   margin-bottom: 2rem;
   border-bottom: 1px solid #444;
   font-weight: bold;
   color: red;
   font-size: 1.2rem;   
}

#contact_form{
   background-color: #555;
   border-radius: 10px 10px 10px 10px;
   margin-top: 5rem;
   padding-bottom: 2rem;
   max-width: 600px;
   margin: 0 auto;
}

#contact_form label{
   display: block;
   margin: 0px 0px 5px;
}

textarea:focus, select:focus, input:focus {
    border: 2px solid darkblue;
}

#contact_form label>span{
   float: left;
   color: red;
   width: 5rem;
   font-weight: bold;
   margin-left: 3rem;
}

#contact_form input, #contact_form select, #contact_form textarea{
   background-color: #DFDFDF;
   height: 25px;
   text-indent: 5px;
   margin-bottom: 16px;
   border-radius: 2px;
   width: 65%;
}

#contact_form textarea{
   height: 150px;
}

button{
   border-radius: 5px 5px 5px 5px;
   background-color: black;
   color: red;
   padding: .5rem;

   text-align: center;
   margin: 0 auto;
   margin-left: 50%;
}

JSFiddle: https://jsfiddle.net/t1phcxfx/

Answer 1

尝试在您的 CSS 中添加一个 float :

.send {
  display: block;
  float: left;
}

.clear {
  display: block;
}

更新了您的 Fiddle

然后您可以将 margin 或 padding 添加到您的类(也可能是父类)，并根据需要使内容居中。