Html 在一段中的一个形状内居中
我使用bootstrap 4,并且在一个部分中使用这个表单,我对按钮居中以及使其成为两列的长度存在问题,以便它与输入框的外边界保持一致。目前,如果我只是在100%的宽度按钮,它似乎居中,但比输入框长,所以它看起来关闭。我的结构是否正确?我用了一个表格作为例子,不确定这是正确的还是有更好的方法 这是我的密码笔: 该部分的html:Html 在一段中的一个形状内居中,html,css,bootstrap-4,Html,Css,Bootstrap 4,我使用bootstrap 4,并且在一个部分中使用这个表单,我对按钮居中以及使其成为两列的长度存在问题,以便它与输入框的外边界保持一致。目前,如果我只是在100%的宽度按钮,它似乎居中,但比输入框长,所以它看起来关闭。我的结构是否正确?我用了一个表格作为例子,不确定这是正确的还是有更好的方法 这是我的密码笔: 该部分的html: <div class="container-fluid bg-3 text-center" id="contact"> <h3>CONT
<div class="container-fluid bg-3 text-center" id="contact">
<h3>CONTACT US</h3><br>
<div class="container">
<div class="col-sm-8 col-sm-push-2">
<form role="form">
<br style="clear:both">
<div class="col-sm-6">
<div class="form-group">
<input type="text" class="control" id="firstname" name="firstname" placeholder="First Name" required>
</div>
<div class="form-group">
<input type="text" class="control" id="email" name="email" placeholder="Email" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="text" class="control" id="lastName" name="lastName" placeholder="Last Name" required>
</div>
<div class="form-group">
<input type="text" class="control" id="phone" name="phone" placeholder="Phone" required>
</div>
</div>
<button type="button" id="submit" name="submit" class="btn btn-primary pull-right">SEND</button>
</form>
</div>
</div>
</div>
您可以通过多种方式修复它们,问题的原因是col-sm-6类的两侧都有一个15px的填充,而您的按钮没有任何填充。作为一个快速解决方案,您可以使用col-sm-12类将按钮包装在一个div中,或者只在按钮的左右两侧添加一个15px的填充。好吧,很酷,但如果我将宽度减小到60%,我如何保持它居中,我这样做时它似乎会粘在一边?这是因为在按钮上有一个名为pull right的类,这是保持按钮浮动到右边,移除那个类,你们应该很好
#contact{
background-color: #febb2e;
height: 500px;
color: #000;
}
.form-area
{
background-color: #FAFAFA;
padding: 10px 40px 60px;
margin: 10px 0px 60px;
border: 1px solid GREY;
}
.control{
display: block;
width: 100%;
height: 50px;
padding: 6px 10px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
border: 1px solid #fff;
border-radius: 10px;
}
button#submit {
background-color: #8d1f2d;
border-color: #8d1f2d;
width: 100%;
border-radius: 10px;
}