Question

正如你在这个小提琴中看到的那样......

有四列三列不能正确定位在黑色背景上。我希望能够在黑色背景中重新定位它们。这与我正在尝试在我正在制作的网页上做的大致对应（即确切的大小可能会改变）。

是否有办法使用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/

是否有一种简单的方法（即不是完全黑客）来重新定位这些元素？

1 个答案: