Centering "odd" spans with Twitter Bootstrap grid

Question

I played with bootstrap a little, then I found this annoying problem about how to centering a span class. After trying offset to do centering some span, I can centering a certain span class like (span8 with offset2, or span6 with offset 3), but the problem is, I want to centering the span7/span9/span10.

Then I trying to use some tricks to centering the span10...

<div class="container"> <!--Or span12 since the width are same-->
  <div class="row">
    <div class="span1" style="background:black;">Dummy</div>
    <div class="span10" style="background:blue;">The Real One</div>
    <div class="span1" style="background:black;">Dummy</div>
  </div>
</div>

Is there any solution rather than using the code above?

And what should I do if I want to centering the span7, span9 or even span11 without changing the row margin-left value? Because the class row already set the margin-left by 20px, that makes me hard to centering the span.

Answer 1

Centering "even" .spanN? Use .offsetN

<div class="span10 offset1">

Centering "odd" .spanN? Impossible using framework resources. As you decided to use Twitter Bootstrap, you assumed working with a grid. If you center an "odd" column width element, you're breaking the grid, so there are no Bootstrap tools to do that.

There's a theoric (but strange) solution: duplicate your column count. In a 24-column layout, a .span7 becomes a span14, wich you can center with an .offset5.

Answer 2

This is a non-issue in Bootstrap 3, but for Bootstrap 2.x, I've come up with a CSS workaround that creates a 'half' offset that can be used to center (almost) odd numbers of spans. These half spans create a percentage that is half the standard offsetX in the bootstrap.css

/* odd span centering helpers */

  .row-fluid .offsetHalf {margin-left:8.5% !important;}
  .row-fluid .offsetHalf1 {margin-left:12.9% !important;}
  .row-fluid .offsetHalf2 {margin-left:21.6% !important;}
  .row-fluid .offsetHalf3 {margin-left:25.6% !important;}

Link to demo