中心水平形式的 twitter 引导程序答案

【问题标题】：center horizontal-form twitter bootstrap中心水平形式的 twitter 引导程序
【发布时间】：2012-10-10 13:58:09
【问题描述】：

我已经尝试了所有我能想到的东西，并查看了文档/教程/github 自述文件的每一点。

我正在构建一个使用简单表单和 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>

请问有人可以在这里提供一些支持吗？

【问题讨论】：

标签： html css ruby-on-rails twitter-bootstrap

【解决方案1】：

添加form {margin:0 auto} 使整个表单居中。

【讨论】：

@ohwutup，如果您使用margin: 0 auto; 进行对齐，您的主题及其父项必须设置为position: relative;。否则，DOM 布局引擎没有“绘制”主题的参考框架——至少在 X 轴方面。

【解决方案2】：

您必须使用width: some_value 和margin:auto 来使整个表单居中。（别忘了position:relative; 和display:block;）

【讨论】：

对不起，对 css 有点陌生，你能详细说明一下吗？我添加了form {width: 1080px; margin:auto; position: relative; display: block;}，但仍然没有。
是的，这是正确的，但您应该将表单宽度设置为小于页面宽度

【解决方案3】：

在这种情况下，以常规方式居中（使用margin: 0 auto）将不起作用，因为您的表单没有附加宽度，但您可以通过在表单中声明容器 div @987654324 使其居中而不管宽度如何@ 然后将表单文本居中，如下所示：

#new_message {
    text-align:center;
}

.center {
    display:inline-block;
}

演示：http://jsfiddle.net/uyKqJ/，在此处查看：http://jsfiddle.net/uyKqJ/show/

【讨论】：

对不起，我对这一切有点陌生，我不太确定如何实施。我在 jsfiddle 中看到了示例，但不确定我需要添加到我的 _form.html.erb 以生成允许我以这种方式添加 css 的适当标记。
我想，更具体地说，“在我的表单inline block 中声明该容器 div 是什么意思？
@ohwutup 我很高兴！我在表单标签之后使用那个 div 来使内容居中，你可以通过我使用的类找到这个 div，`
..
`.