我已经构建了一个相对简单的联系表单,似乎无法集中实际内容(它目前位于左侧,我希望将其移动到死点),我的逻辑是边缘汽车类应该有效但没有运气,提前感谢能够看出我的逻辑错误的人。
表格对我来说有点新鲜,也许我应该针对不同的元素?
<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;
}
答案 0 :(得分:0)
问题是你有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>