有沒有簡單的方法（即不是徹底的破解）來重新定位這些元素？

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/