[英]centering contact form content
我已经建立了一个相对简单的联系表单,似乎无法集中实际内容(它目前位于左侧,我希望将其移动到死点),我的逻辑是边缘汽车类应该有效但没有运气,谢谢提前给任何能看出我的逻辑错误的人。
表格对我来说有点新鲜,也许我应该针对不同的元素?
<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;
}
问题是你有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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.