Html 如何在 twitter bootstrap 中居中表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12172651/
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 twitter bootstrap?
提问by user1438003
<div class="container">
<div class="row">
<div class="span6 center">
<form>
<table>
<tbody>
<td>foo</td>
</tbody>
</table>
</form>
</div>
</div>
</div>
Note: I am using an abstracted layer so am unable to change the class of <form>.
注意：我使用的是抽象层，因此无法更改<form>.
How do I get the form centred using Twitter-Bootstrap?
如何使用 Twitter-Bootstrap 使表单居中？
FYI: I have also tried with pagination-centred.
仅供参考：我也尝试过使用pagination-centred.
回答by albertedevigo
The native way for positioning elements in Bootstrap is using offset. I will assume that you are using a 12-column layout.
在 Bootstrap 中定位元素的原生方式是使用offset. 我假设您使用的是 12 列布局。
Bootstrap 2
引导程序 2
<div class="container">
<div class="row">
<div class="span6 offset3">
<form>
...
</form>
</div>
</div>
</div>
Further information in the documentation
文档中的更多信息
Bootstrap 3
引导程序 3
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form>
...
</form>
</div>
</div>
</div>
Further information in the documentation
文档中的更多信息
回答by Andres Ilich
Both answers posted are valid and work so I upvoted them. Here is another method i did not see posted.
发布的两个答案都有效且有效，因此我对它们进行了投票。这是我没有看到发布的另一种方法。
You can center your form by setting it to display:inline-blockand center it within the .centercontainer using text-align:center. This way the form will center regardless of width within that container:
您可以使用 将表单设置为display:inline-block居中并在.center容器内居中text-align:center。这样，无论该容器内的宽度如何，表单都会居中：
CSS
CSS
.center {
text-align:center;
}
.center form {
display:inline-block;
}
回答by Shiv
This is where i found my answer.
这是我找到答案的地方。
https://stackoverflow.com/a/15084576/1140407
https://stackoverflow.com/a/15084576/1140407
<div class="container">
<div class="row">
<div class="span9 centred">
This div will be centred.
</div>
</div>
</div>
and to CSS:
和 CSS：
[class*="span"].centred {
margin-left: auto;
margin-right: auto;
float: none;
}
回答by IsaacSF
Have you tried this?
你试过这个吗？
.center form {
display: table;
margin: 0 auto;
}
This is the easy and fast solution for me.
这对我来说是简单快捷的解决方案。
回答by Fred
回答by user864786
<div class="container">
you coding for form
你为表格编码
</div>
</div>
