CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Maik Klein
Maik Klein

Reputation: 16168

Twitter Bootstrap - Centering content

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;

}

Upvotes: 1

Views: 10510

Answers (6)

Matt Lambert
Matt Lambert

Reputation: 3665

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

.center {
 text-align: center;
}

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

Upvotes: 0

Alex Grande
Alex Grande

Reputation: 8027

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>

Upvotes: 1

Nur Rony
Nur Rony

Reputation: 8083

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

Upvotes: 1

Colette
Colette

Reputation: 27

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

    <div class="span12 pagination-centered">

Upvotes: 1

Pevara
Pevara

Reputation: 14308

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...

Upvotes: 2

Josh
Josh

Reputation: 2895

Change the css to this:

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

EDIT:

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

Upvotes: 1

Related Questions