Question

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

我希望此表单在页面上居中。

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

Answer 1

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

Answer 2

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

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

看看here

Answer 3

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

使表格居中

这应该有效。

在twitter-bootstrap中居中心？

3 个答案: