[英]Is there a simple way (i.e. not a total hack) to reposition these elements?
如您在这个小提琴中看到的...
http://jsfiddle.net/mjmitche/xt4aQ/78/
三列有四行,它们在黑色背景下放置不正确。 我希望能够在黑色背景内重新放置它们。 这与我正在制作的网页上要执行的操作大致相对应(即,确切的大小可能会更改)。
有没有一种方法可以使用position: absolute
或position: relative
或其他方法来使列在黑色背景下居中?
请注意,正如您在小提琴中看到的那样,我正在使用Twitter bootstrap.css(它带有很多有用的spans类和确定宽度的行等)。
这是代码,但是看小提琴可能更容易。 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>
只需在背景中的所有HTML上放置一个包装器,然后将左右边距设置为auto。 这使所有内容都以背景为中心。 您还必须设置包装的宽度。 在这里,我将其设置为290px。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.