中心水平形式的twitter引导

我已经尝试了我可能想到的所有事情，并且查看了文档/ tutorials/github自述文件的每一处。中心水平形式的twitter引导

我正在构建一个简单的使用简单窗体和twitter引导的rails应用程序。

我想我的形式是在页面的中心，我可以得到场在我的引导css文件中添加此移动到中心：

body { 
    text-align: center; 
}

导致：

Imgur

无论我做什么，我都无法将标签“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>

请任何人都可以在这里提供一些支持？

来源

2012-10-19 ohayon

围绕通过常规手段（使用margin: 0 auto）将不会在这种情况下工作，因为没有连接到您的表格的宽度，但你可以得到它通过声明，无论宽度的中心表单里面那个div容器inline-block，然后文本为中心的形式，就像这样：

#new_message { 
    text-align:center; 
} 

.center { 
    display:inline-block; 
}

演示：http://jsfiddle.net/uyKqJ/，查看这里：http://jsfiddle.net/uyKqJ/show/

来源

2012-10-19 22:35:26

抱歉，我对这一切都有点新鲜感，我不太确定如何实现这一点。我在jsfiddle中看到了这个例子，但我不确定我需要添加到我的'_form.html.erb'中以生成适当的标记，这将允许我以这种方式添加css。 – ohayon

我想，更具体地说，你是什么意思的“声明在我的窗体内嵌块'的容器div？ – ohayon

编辑!!!谢谢!!!我把一个div围绕我的轨道形式标签，它的工作！ – ohayon

将form {margin:0 auto}添加到整个表单的中心。

来源

2012-10-19 21:55:32 bookcasey

没有解决它:( – ohayon

@ohwutup，如果你”重新使用'margin：0 auto;'来对齐，你的主题和它的p arent必须设置'position：relative;'。否则，DOM布局引擎没有参照“绘制”主题 - 至少在X轴方面。 – Cody

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

来源

2012-10-19 22:03:03

对不起，有点新的CSS，你能否详细说明一下？我在'form {width：1080px;保证金：汽车;位置：相对;显示：块;}'仍然没有。 – ohayon

是的，这是正确的，但你应该设置窗体宽度小于你的页面宽度 –

中心水平形式的twitter引导

回答

相关问题