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>

こちらをご覧ください

于 2012-09-22T12:16:17.217 に答える
0

フォームはすでに中央に配置されています。あなたがする必要があるのは、スタイルを適用してテーブルを中央に配置することですmargin:0 auto;

これはうまくいくはずです。

于 2012-09-22T13:33:06.953 に答える