集中聯系表格內容

Question

我已經建立了一個相對簡單的聯系表單，似乎無法集中實際內容（它目前位於左側，我希望將其移動到死點），我的邏輯是邊緣汽車類應該有效但沒有運氣，謝謝提前給任何能看出我的邏輯錯誤的人。

表格對我來說有點新鮮，也許我應該針對不同的元素？

<section id="contact">
      <div class="contact-title">
        <h2>Lets talk about building your new site</h2>
        <h3>Contact me today and ill be in touch soon</h3>
      </div>

      <div class="contact-form">
        <form id="contact-form" method="post" action="">



          <input name="name" type="text" class="form-control" placeholder="Your Name" required>
          <br>

          <input name="email" type="email" class="form-control" placeholder="Your Email" required>
          <br>


           <input name="phone" type="text" class="form-control" placeholder="Your Phone" required>
          <br>

          <textarea name="message" class="form-control"  cols="60" rows="10" placeholder="Message goes here"></textarea>
          <br>

          <input type="submit" class="form-control submit" value="SEND MESSAGE">

        </form>
      </div>
   </section>

CSS

#contact {
margin:0;
padding: 0;
text-align: center;
background: linear-gradient(rgba(0,0,50,0.5),rgba(0,0,50,0.5)),url('https://images.unsplash.com/photo-1491986926302-149ec463b90a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f34dc245ab45d60718efaa50bcdecee1&auto=format&fit=crop&w=1351&q=80');
background-size: cover;
background-position: center;
}

.contact-title {
  padding-top: 3rem;
  margin-top:50px;
  text-transform: uppercase;
  color: #fff;
  transition: all 4s ease-in-out;
}

.contact-title h2 {
 font-size: 4rem;

}


form {
  margin-top: 5rem;
  transition: all 4s ease-in-out;
  text-align: center;
}

.form-control {
  width:600px;
  background:transparent; 
  border:none;
  outline: none;
  border-bottom: 1px solid grey;
  color:#fff;
}


.form-control:hover {
  width:600px;
  background:transparent; 
  border:none;
  outline: none;
  border-bottom: 1px solid grey;
  color:#fff;
}

input {
  height:45px;
}

form .submit {
  background: #ff5722;
  border-color: transparent;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  height: 50px;
  margin-top: 20px;
  text-align: center;
}

form .submit:hover {
  background: #ff5722;
  cursor: pointer;
}

.contact-form {
  width: 100%;
  margin: 0 auto;
}

Answer 1

問題是你有600px的表格控件的固定寬度和聯系表格寬度是100％。 它填滿了屏幕，你實際上無法看到它是否居中。 在下面的代碼片段中，我將表單控件大小縮小為200px，將div寬度縮小到50％，您可以看到表單居中。

 #contact { margin:0; padding: 0; text-align: center; background: linear-gradient(rgba(0,0,50,0.5),rgba(0,0,50,0.5)),url('https://images.unsplash.com/photo-1491986926302-149ec463b90a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f34dc245ab45d60718efaa50bcdecee1&auto=format&fit=crop&w=1351&q=80'); background-size: cover; background-position: center; } .contact-title { padding-top: 3rem; margin-top:50px; text-transform: uppercase; color: #fff; transition: all 4s ease-in-out; } .contact-title h2 { font-size: 4rem; } form { margin-top: 5rem; transition: all 4s ease-in-out; text-align: center; } .form-control { width:200px; background:transparent; border:none; outline: none; border-bottom: 1px solid grey; color:#fff; } .form-control:hover { width:200px; background:transparent; border:none; outline: none; border-bottom: 1px solid grey; color:#fff; } input { height:45px; } form .submit { background: #ff5722; border-color: transparent; color: #fff; font-size: 20px; font-weight: bold; letter-spacing: 2px; height: 50px; margin-top: 20px; text-align: center; } form .submit:hover { background: #ff5722; cursor: pointer; } .contact-form { width: 50%; margin: 0 auto; } 

 <section id="contact"> <div class="contact-form"> <form id="contact-form" method="post" action=""> <input name="name" type="text" class="form-control" placeholder="Your Name" required> <br> <input name="email" type="email" class="form-control" placeholder="Your Email" required> <br> <input name="phone" type="text" class="form-control" placeholder="Your Phone" required> <br> <textarea name="message" class="form-control" cols="60" rows="10" placeholder="Message goes here"></textarea> <br> <input type="submit" class="form-control submit" value="SEND MESSAGE"> </form> </div> </section>