在 twitter-bootstrap 中居中表格？ [关闭]答案

【问题标题】：Centering form in twitter-bootstrap? [closed]在 twitter-bootstrap 中居中表格？ [关闭]
【发布时间】：2012-09-14 15:28:53
【问题描述】：

我正在为一个学生团体等开发一个开源社交网络。

我希望此表单位于页面中心。

我的尝试：http://jsfiddle.net/WgSgW/

如何使其居中？ - 我最接近可行的解决方案是使用 offset# 类。

【问题讨论】：

标签： css layout twitter-bootstrap html forms

【解决方案1】：

在 Twitter Bootstrap 中定位元素的原生方式是使用 offset# 类。对于您的特定情况，您可以使用

<div class="span4 offset4"> ... </div>

塔吉看看here

【讨论】：

是的，我知道我可以让它与 offset# 类一起使用，但我认为可能有其他选择。

【解决方案2】：

表格已经居中。你需要做的是通过应用样式margin:0 auto;使表格居中

这应该可以。

【讨论】：

【解决方案3】：

将您的表单容器.span9 替换为.span12 以在屏幕上完全展开该行，然后只需将您的登录表定义为display:inline-block 和text-align:center 表单的所有内容，如下所示：

创建了我自己的类，以免弄乱引导程序的默认值。

CSS

.login {
    text-align:center;
}

.center {
    *display:inline; /* ie 7 */
    display:inline-block;
    text-align:left; /* to reset the alignment to the left, container will remain centered */
    zoom:1; /* ie7 junk */
}

HTML

<div class="container">
    <div class="row">
        <div class="span12 login">
            <form action="" enctype="multipart/form-data" method="post">
                <table class="center">
                    <tr id="auth_user_email__row">
                        <td class="w2p_fl"><label for="auth_user_email" id="auth_user_email__label" style="display:none;">Email: </label></td><td class="w2p_fw">
                        <input class="string" id="auth_user_email" name="email" placeholder="email address" type="text" value="" />
                        </td><td class="w2p_fc"></td>
                    </tr>
                    <tr id="auth_user_password__row">
                        <td class="w2p_fl"><label for="auth_user_password" id="auth_user_password__label" style="display:none;">Password: </label></td><td class="w2p_fw">
                        <input class="password" id="auth_user_password" name="password" placeholder="password" type="password" value="" />
                        </td><td class="w2p_fc"></td>
                    </tr>
                    <tr id="submit_record__row">
                        <td class="w2p_fl"></td><td class="w2p_fw">
                        <input class="btn btn-large btn-primary" type="submit" value="Signup" />
                        </td><td class="w2p_fc"></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="pagination-centered">
        By signing up you are agreeing to our <a href="/legal/agreement/">terms &amp; conditions</a>
    </div>
</div>

演示：http://jsfiddle.net/WgSgW/1/

【讨论】：

谢谢，我已经准备好接受这个答案了。不过，在我这样做之前，有没有办法将输入区域也居中？
@AT 是的，只需从 .center 类中删除 text-align:left; 属性。我把它放在那里以重置元素的位置。
太好了，谢谢。将在今天晚些时候进行测试。