Twitter Bootstrap - Centering content

Question

http://elosource.herokuapp.com/

As you can see on my test page, the content is aligned in the left site. I want to have it in the center.

I read though http://www.w3.org/Style/Examples/007/center.en.html but it didn't work for some reason.

My content looks like this

<div class="content">

        <div class="row">
            <div class="span">
               <img src="http://placehold.it/180x1200">
            </div>
        <div class="span12">
                @content
            </div>
            <div class="span">
                <img src="http://placehold.it/180x1200">
            </div>
        </div>

    </div>

And my css:

.content {
background-color: #fff;
display: block;
margin-left:auto;
margin-right: auto;

}

Answer 1

you should set a width on your .content as well. Something like this:

.content {
   margin: 0 auto;
   width: 1340px;
}

tried it in the chrome inspector and works fine...

Answer 2

Change the css to this:

.content {
background-color: #fff;
display: block;
text-align: center;
}​

EDIT:

Here is a fiddle: http://jsfiddle.net/FlameTrap/x6vPH/

Answer 3

Are you looking to centre the @content? If so try this.

    <div class="span12 pagination-centered">

Answer 4

try this . i got it from twitter issue tracker

 <div class="container">
    <div class="alert-message block-message info" style="margin:10px">
        <h3>Centered Layouts</h3>
        <div class="alert-message block-message success span12 offset1">
            <p>Layout for <code>span12 offset1</code></p>
        </div>
        <div class="alert-message block-message success span10 offset2">
            <p>Layout for <code>span10 offset2</code></p>
        </div>
        <div class="alert-message block-message success span8 offset3">
            <p>Layout for <code>span8 offset3</code></p>
        </div>
        <div class="alert-message block-message success span6 offset4">
            <p>Layout for <code>span6 offset4</code></p>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="alert-message block-message info" style="margin:10px">
        <h3>Split Layouts</h3>
        <div class="row">
            <div class="alert-message block-message success span6">
                <p>Layout for<code>span6</code></p>
            </div>
            <div class="alert-message block-message success span4 offset4">
                <p>Layout for <code>span2 offset6</code></p>
            </div>
        </div>
        <div style="clear:both"></div>
    </div> 
</div>    

hoping this helps

Answer 5

I'm not a fan of setting widths to things. That's why I like using inline-block for centering.

<div style="text-align: center;">
  <div style="display: inline-block; text-align: left;">
    <p>I'm so centered</p>
  </div>
</div>

Answer 6

create a .center class and wrap a div around whatever you want to center.

.center {
 text-align: center;
}

<div class="center">
  ... stuff ...
</div>