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?

Answer 1

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/