中心水平形式的twitter bootstrap

Question

我已经尝试了所有我能想到的东西,并查看了所有文档/教程/ github自述文件.

我正在构建一个简单的rails应用程序,它使用简单的形式和twitter bootstrap.

我希望我的表单位于页面的中心,我可以通过在我的bootstrap 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/