0

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

我希望此表单以页面为中心。

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

我如何让它居中？- 我最接近工作解决方案的是使用这些offset#类。

4

3 回答 3

2

替换您的表单容器，.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/

于 2012-09-22T15:25:37.410 回答
0

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

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

Taje 看这里

于 2012-09-22T12:16:17.217 回答
0

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

这应该有效。

于 2012-09-22T13:33:06.953 回答