中心水平形式的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引導

回答

相關問題