center horizontal-form twitter bootstrap

Question

I have tried everything I can possibly think of, and looked at every bit of documentation/tutorials/github readmes.

I am building a simple rails app that is using simple form and twitter bootstrap.

I would like my form to be in the center of the page and I can get the fields to move to the center by adding this in my bootstrap css file:

body {
    text-align: center;
}

Which results in:

No matter what I do, I cannot get the labels "control-label"s to align to center. I have tried using an id among many other things.

Here is the code for my form:

    <%= 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 %>

and the generated 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>

Please can anyone offer some support here?

Solution

Centering by usual means (using margin: 0 auto) won't work in this case since there is no width attached to your form, but you can get it to center regardless of width by declaring that container div inside your form inline-block and then text-centering your form, like so:

#new_message {
    text-align:center;
}

.center {
    display:inline-block;
}

Demo: http://jsfiddle.net/uyKqJ/, view here: http://jsfiddle.net/uyKqJ/show/

Comments

[ohayon]

sorry, im a little new to all of this, and am not so sure how to implement this. i see the example in jsfiddle, but am not sure what i need to add to my _form.html.erb to generate the appopriate markup that will allow me to add css that way.

[ohayon]

i guess, more specifically, what do you mean by "declaring that container div inside my form inline block?

[Andres Ilich]

@ohwutup im glad! i used that div after the form tag to center the content, you can find this div by the class i used, ` <div class="center">..</div>`.

[Cody]

@ohwutup, if you're using margin: 0 auto; for alignment, your subject AND its parent must be set position: relative;. Otherwise, the DOM Layout Engine has no frame of reference to "Draw" the subject -- at least in terms of the X-Axis.