[英]Is there a simple way (i.e. not a total hack) to reposition these elements?
As you see in this fiddle... 如您在这个小提琴中看到的...
http://jsfiddle.net/mjmitche/xt4aQ/78/ http://jsfiddle.net/mjmitche/xt4aQ/78/
there are four rows of three columns that aren't positioned properly against the black background. 三列有四行,它们在黑色背景下放置不正确。 I want to be able to reposition them inside the black background. 我希望能够在黑色背景内重新放置它们。 This roughly corresponds (ie the exact sizes might change)to what I'm trying to do on the web page I'm making. 这与我正在制作的网页上要执行的操作大致相对应(即,确切的大小可能会更改)。
Is there a way using position: absolute
or position: relative
or something else to try to centre the columsn against the black background? 有没有一种方法可以使用position: absolute
或position: relative
或其他方法来使列在黑色背景下居中?
Note, as you see in the fiddle, I'm using Twitter bootstrap.css (which comes with a lot of helpful spans classes and rows that determine widths etc 请注意,正如您在小提琴中看到的那样,我正在使用Twitter bootstrap.css(它带有很多有用的spans类和确定宽度的行等)。
Here's the code, but it's probably easier to look at the fiddle. 这是代码,但是看小提琴可能更容易。 http://jsfiddle.net/mjmitche/xt4aQ/78/ 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>
Just put a wrapper around all your HTML inside of the background and set the left and right margin to auto. 只需在背景中的所有HTML上放置一个包装器,然后将左右边距设置为auto。 This centers everything on the background. 这使所有内容都以背景为中心。 You also have to set a width to the wrapper. 您还必须设置包装的宽度。 Here I set it to 290px's. 在这里,我将其设置为290px。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.