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>

集中联系表格内容

1 个答案: