html - センター水平形式のTwitterブートストラップ

Question

私は考えられるすべてのことを試し、ドキュメント/チュートリアル/githubのreadmeのすべてを調べました。

シンプルなフォームとTwitterのブートストラップを使用したシンプルなRailsアプリを構築しています。

フォームをページの中央に配置したいのですが、ブートストラップcssファイルにこれを追加することで、フィールドを中央に移動させることができます。

body {
    text-align: center;
}

その結果：

何をしても、ラベル「control-label」を中央に揃えることができません。私はid他の多くのものの中で使用してみました。

これが私のフォームのコードです：

    <%= simple_form_for @message, :html => { :class => 'form-horizontal' } do |f| %>

        <%= f.input :phone, :input_html => { :maxlength => 10 }, :label_html => { :class => 'control-label' } %>
       <%= f.input :message %>

       <div class="form-actions" id="sendbtn">
            <%= f.button :submit, :class => 'btn-primary' %>
       </div>

    <% end %>

および生成されたhtml：

<div class="container">
    <div class="page-header">
        <h1 id="pagetitle">New Message</h1>
    </div>
    <form id="new_message" class="simple_form form-horizontal" novalidate="novalidate" method="post" action="/messages" accept-charset="UTF-8">
        <div style="margin:0;padding:0;display:inline">
        <div class="control-group tel optional">
            <label class="tel optional control-label control-label" for="message_phone">Phone</label>
            <div class="controls">
                <input id="message_phone" class="string tel optional" type="tel" size="50" name="message[phone]" maxlength="10">
            </div>
        </div>
        <div class="control-group text optional">
            <label class="text optional control-label" for="message_message">Message</label>
        <div class="controls">
                <textarea id="message_message" class="text optional" rows="20" name="message[message]" cols="40"></textarea>
            </div>
        </div>
        <div id="sendbtn" class="form-actions">
            <input class="btn btn-primary" type="submit" value="Create Message" name="commit">
        </div>
    </form>
</div>

誰かがここでいくつかのサポートを提供できますか？

Answer 1

この場合、フォームに幅が設定されていないため、通常の方法 ( を使用) によるセンタリングmargin: 0 autoは機能しませんが、フォーム内でコンテナ div を宣言してinline-blockからテキストを中央揃えにすることで、幅に関係なく中央に配置できます。そのようです：

#new_message {
    text-align:center;
}

.center {
    display:inline-block;
}

デモ: http://jsfiddle.net/uyKqJ/、ここで表示: http://jsfiddle.net/uyKqJ/show/

Answer 2

width: some_valueおよびmargin:autoフォーム全体を中央に配置する必要があります。（忘れないposition:relative;でくださいdisplay:block;）

Answer 3

form {margin:0 auto}フォーム全体を中央に追加します。