How do I center a Bootstrap div with a 'spanX' class?

Question

I use bootstrap and am trying to center a div(span7) like that:

<div class="row-fluid">     <div id="main" class="span7">         Lorem ipsum dolor sit amet     </div> </div> 

my css code is:

#main{     margin:0px auto; } 

But it isn't set at the center. How can i set center?

EDIT

span7 is now col-7 in Bootstrap 4 and row-fluid is deprecated(Instead of this, use container-fluid and row).

Answer 1

Twitter's bootstrap .span classes are floated to the left so they won't center by usual means. So, if you want it to center your span simply add float:none to your #main rule.

CSS

#main {  margin:0 auto;  float:none; } 

Answer 2

Incidentally, if your span class is even-numbered (e.g. span8) you can add an offset class to center it – for span8 that would be offset2 (assuming the default 12-column grid), for span6 it would be offset3 and so on (basically, half the number of remaining columns if you subtract the span-number from the total number of columns in the grid).

UPDATE Bootstrap 3 renamed a lot of classes so all the span*classes should be col-md-* and the offset classes should be col-md-offset-*, assuming you're using the medium-sized responsive grid.

I created a quick demo here, hope it helps: http://codepen.io/anon/pen/BEyHd.