如何在 twitter bootstrap 中居中？答案

【问题标题】：How to center form in twitter bootstrap?如何在 twitter bootstrap 中居中？
【发布时间】：2014-06-27 15:31:51
【问题描述】：

<div class="container">
    <div class="row">
        <div class="span6 center">
            <form>
                <table>
                    <tbody>
                        <td>foo</td>
                    </tbody>
                </table>
            </form>
        </div>
    </div>
</div>

JSfiddle

注意：我使用的是抽象层，因此无法更改 <form> 的类。

如何使用 Twitter-Bootstrap 使表单居中？

仅供参考：我也尝试过pagination-centred。

【问题讨论】：

标签： css html twitter-bootstrap

【解决方案1】：

在 Bootstrap 中定位元素的原生方式是使用 offset。我假设您使用的是 12 列布局。

引导程序 2

<div class="container">
    <div class="row">
        <div class="span6 offset3">
            <form>
                ...
            </form>
        </div>
    </div>
</div>

更多信息在documentation

引导程序 3

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form>
                ...
            </form>
        </div>
    </div>
</div>

更多信息在documentation

【讨论】：

谢谢，offset4 看起来差不多，但我想我正在寻找介于 offset3 和 offset4... 之间的某个位置...即：居中

【解决方案2】：

发布的两个答案都是有效且有效的，所以我投了赞成票。这是我没有看到的另一种方法。

您可以将表单设置为display:inline-block 居中，并使用text-align:center 在.center 容器中居中。这样，无论容器内的宽度如何，表单都会居中：

CSS

.center {
    text-align:center;
}

.center form {
    display:inline-block;
}

【讨论】：

谢谢，这很有效，但也改变了我的标签和输入区域的文本对齐方式。所以我必须有额外的 CSS 来修复它们。

【解决方案3】：

这是我找到答案的地方。

https://stackoverflow.com/a/15084576/1140407

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

到 CSS：

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

【讨论】：

【解决方案4】：

你试过了吗？

.center form {
        display: table;
        margin: 0 auto;
    }

这对我来说是简单快捷的解决方案。

【讨论】：

【解决方案5】：

没有什么比优秀的 CSS 更好了吗？

.center > form {
  width: 300px; // some amount to prevent using 100% width
  margin: 0 auto;
}

并将.span6 更改为.span12

Jsfiddle here。

【讨论】：

【解决方案6】：

<div class="container">

你为表单编码

</div>

【讨论】：