Centering Odd Intervals with a Twitter Download Network

Question

I played a little with bootstrap, then I found this nasty problem on how to center the span class. After trying the offset to center a certain range, I can center a certain range class, for example (span8 with offset2 or span6 with offset 3), but the problem is that I want to center span7 / span9 / span10.

Then I try to use some tricks to center 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, not using the above code?

And what should I do if I want to center span7, span9, or even span11 without changing the margin-left field? Since the class line already has a margin-left value of 20 pixels, this makes it difficult to center the range.

Answer 1

Centering Exactly .spanN ? Use .offsetN

 <div class="span10 offset1"> 

Odd .spanN ? Unable to use environment resources. When you decided to use Twitter Bootstrap, you decided to work with the grid. If you center the “odd” column width element, you break the grid, so Bootstrap tools are not required for this.

There is a theoretical (but strange) solution: duplicate the number of columns. In 24 column format, a .span7 becomes span14 , with which you can center with .offset5 .

Answer 2

I hope this is not a problem in Bootstrap 3, but for Bootstrap 2.x I came up with a CSS workaround that creates a “half” offset that can be used to center (almost) odd numbers of spans. These half-spaces create a percentage equal to half the standard offsetX in 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;} 

Demo Link