Html 如何在引导程序 3 中居中表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20853066/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center form in bootstrap 3
提问by cactodevcie
How can I center my login form ? I'm using bootstrap column but it's not working.
如何将我的登录表单居中？我正在使用 bootstrap 列，但它不起作用。
Here is my code:
这是我的代码：
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-6">
<h2>Log in</h2>
<div>
<table>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
</table>
</div>
</div>
</div>
</div>
采纳答案by NoobEditor
A simple way is to add
一个简单的方法是添加
.center_div{
margin: 0 auto;
width:80% /* value of your choice which suits your alignment */
}
to you class .container.Add width:xx %to it and you get perfectly centered div!
你班.container。新增width:xx %到它，你会得到完全居中的div！
eg :
例如：
<div class="container center_div">
but i feel that by default containeris centered in BS!
但我觉得默认情况下container以 BS 为中心！
回答by Sid
There is a simple way of doing this in Bootstrap. Whenever I need to make a divcenter in a page, I divide all columns by 3 (total Bootstrap columns = 12, divided by 3 >>> 12/3 = 4). Dividing by four gives me three columns. Then I put my divin middle column. And all this math is performed by this way:
在 Bootstrap 中有一种简单的方法可以做到这一点。每当我需要div在页面中设置中心时，我会将所有列除以 3（Bootstrap 总列数 = 12，除以 3 >>> 12/3 = 4）。除以四给我三列。然后我把我的div放在中间列。所有这些数学都是通过这种方式进行的：
<div class="col-md-4 col-md-offset-4">my div here</div>
col-md-4makes one column of 4 Bootstrap columns. Let's say it's the main column. col-md-offset-4adds one column (of width of 4 Bootstrap column) to both sides of the main column.
col-md-4制作一列 4 个 Bootstrap 列。假设它是主列。col-md-offset-4在主列的两侧添加一列（宽度为 4 Bootstrap 列）。
回答by user2431058
The total columns in a row has to add up to 12. So you can do col-md-4 col-md-offset-4. So your breaking up your columns into 3 groups of 4 columns each. Right now you have a 4 column form with an offset by 6 so you are only getting 2 columns to the right side of your form. You can also do col-md-8 col-md-offset-2 which would give you a 8 column form with 2 columns each of space left and right or col-md-6 col-md-offset-3 (6 column form with 3 columns space on each side), etc.
一行中的总列数必须加起来为 12。因此您可以执行 col-md-4 col-md-offset-4。因此，您将列分成 3 组，每组 4 列。现在您有一个 4 列的表单，偏移量为 6，因此您只能在表单的右侧获得 2 列。你也可以做 col-md-8 col-md-offset-2 这会给你一个 8 列的形式，左右各有 2 列或 col-md-6 col-md-offset-3（6 列形式每边有 3 列空间）等。
回答by Ammar
use centered class with offset-6 like below sample.
使用具有偏移量 6 的居中类，如下例所示。
<body class="container">
<div class="col-lg-1 col-offset-6 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
回答by sujithuix
I Guess you are trying to center the form both horizontally and vertically with respect to the any container div.
我猜您正试图将表单相对于任何容器 div 水平和垂直居中。
You don't have to make use of bootstrap for it. Just use the popular method (below) to center the form.
您不必为此使用引导程序。只需使用流行的方法（如下）将表单居中即可。
.container{
position relative;
}
.form{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
回答by user7288944
I tried this and it worked
我试过了，它奏效了
<div class="container">
<div class="row justify-content-center">
<div class="form-group col-md-4 col-md-offset-5 align-center ">
<input type="text" name="username" placeholder="Username" >
</div>
</div>
</div>回答by Tavasunny
if you insist on using Bootstrap, use d-inline-blocklike below
如果您坚持使用 Bootstrap，请使用d-inline-block如下所示
<div class="row d-inline-block">
<form class="form-inline">
<div class="form-group d-inline-block">
<input type="email" aria-expanded="false" class="form-control mr-2"
placeholder="Enter your email">
<button type="button" class="btn btn-danger">submit</button>
</div>
</form>
</div>
回答by idirsun
<div class="col-md-4 offset-md-4">
put your form here
</div>
