[英]How to align the form horizontally in the middle of the div in bootstrap
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label><input type="checkbox" /> Check me out</label>
</div> <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
我正在使用bootstrap。
我想在这个div col-md-12 column
的中间对齐表单。
对此有何解决方案?
可以使用像这样的偏移:
<div class="container">
<div class="row clearfix">
<div class="col-md-6 col-md-offset-3 column">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label><input type="checkbox" /> Check me out</label>
</div> <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
</div>
</div>
</div>
要么
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="col-md-6 col-md-offset-3 column">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label><input type="checkbox" /> Check me out</label>
</div> <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</div>
您可以在此处使用属性display
找到两个解决方案。
一个inline-block
:
.col-md-12 column { text-align:center; } .col-md-12 column form { display:inline-block; }
两张table
:
.col-md-12 column form { display:table; margin:auto; }
如果您有一个固定的表格width
,您只需要添加margin:auto
给你的表格一个班级
<form role="form" class="myForm">
并为其添加以下样式
.myForm
{
width: 480px;
margin-left: auto;
margin-right: auto;
}
我会尝试添加
class="center"
至
<form role="form">
以...结束
<form role="form" class="center">
并创建样式声明:
.center{margin:0px auto;}
请记住, .center
的设置宽度必须小于其容器的宽度。
希望有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.