有没有简单的方法（即不是彻底的破解）来重新定位这些元素？

Question

正如您在本拨弄看到...

http://jsfiddle.net/mjmitche/xt4aQ/78/

有三列四行未黑背景中正确定位。我希望能够在黑色背景中重新定位它们。 这大致相当于（即确切的大小可能会改变）我想要在我正在做的网页上做什么。

有没有办法使用position: absolute或position: relative或其他什么来尝试将columsn居中对待黑色背景？

注意，当你在拨弄看到的，我使用Twitter bootstrap.css（它附带了很多有用的跨类和行决定宽度等

下面的代码，但它可能更容易看看小提琴。http://jsfiddle.net/mjmitche/xt4aQ/78/

<div class="span8"> 
    <div class="row"> 
    <div class="span2"> 

    </div> 
    <div class="span6"> 
     <div class="row"> 

     <div class="span2"> 
      <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     <div class="span2"> 
       <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     <div class="span2"> 
       <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     </div> 

     <div class="row"> 

     <div class="span2"> 
      <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     <div class="span2"> 
       <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     <div class="span2"> 
       <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     </div> 

     <div class="row"> 

     <div class="span2"> 
      <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     <div class="span2"> 
       <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     <div class="span2"> 
       <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     </div> 

     <div class="row"> 

     <div class="span2"> 
      <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     <div class="span2"> 
       <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     <div class="span2"> 
       <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     </div> 
    </div> 
    </div> 

</div> 

Answer 1

只要把包装上所有的HTML的背景内，并设置左，右页边距为自动，这集中在后台的一切。你也有一个宽度为在这里我把它设置为290px的。

http://jsfiddle.net/xt4aQ/98/