如何将一组css定位的图像居中放置，并在两侧留有边距？

debugcn 发表于 Dev

罗里的大脑

一个我一直在苦苦挣扎的快速问题。

我想找到一种方法来对我在这些确切位置（相对于彼此）中使用CSS定位的所有这些图像进行分组，以便随后将组居中放置在网页中间？我还希望该组是静态的，因此，如果网页被放大，它们将保留在中心，并且页边距将出现在两侧。

我试图将所有图像放入一个div中，但是除了第一个图像之外，我无法将它们放置在正确的位置。

当前页面的格式是这样的：http://i.imgur.com/rkyLUAO.png

这是我如何尝试修改页面外观的一个示例。粉红色用于显示出现在居中组两侧的页边距。http://i.imgur.com/BW6Wozu.png

<!DOCTYPE html>
 <style>


img.laptop
{
position:absolute;
background-image:none;
left:510px;
top:150px;
width:60px;
z-index:1
}

img.butterfly
{
position:absolute;
background-image:none;
left:840px;
top:290px;
width:40px;
z-index:-2
}

img.rose
{
position:absolute;
background-image:none;
left:580px;
top:205px;
width:75px;
z-index:-1
}

img.smiley1
{
position:absolute;
background-image:none;
left:460px;
top:490px;
z-index:-2
}

img.smiley2
{
position:absolute;
background-image:none;
left:40px;
top:315px;
z-index:-2
}

img.bouquet
{
position:absolute;
background-image:none;
left:940px;
top:440px;
width:60px;
z-index:-4
}


img.corn
{
position:absolute;
background-image:none;
left:472px;
top:310px;
width:20px;
transform: rotate(90deg);
z-index:1
}


img.sword
{
position:absolute;
background-image:none;
left:250px;
top:20px;
width:320px;
z-index:-3
}

img.blush
{
position:absolute;
background-image:none;
left:1150px;
top:550px;
z-index:-3
}

img.suicide
{
position:absolute;
background-image:none;
left:210px;
top:700px;
z-index:-3
}

img.skull
{
position:absolute;
background-image:none;
left:1300px;
top:275px;
width:25px;
z-index:-4
}
</style>

<img class="laptop" src="http://i.imgur.com/BFRmzfO.gif"/>
<img class="skull" src="http://i.imgur.com/2KO9rhQ.gif"/>
<img class="butterfly" src="http://i.imgur.com/Hzo21E9.gif"/>
<img class="smiley1" src="http://i.imgur.com/0t7i4D5.gif"/>
<img class="smiley2" src="http://i.imgur.com/howZ8iG.gif"/>
<img class="rose" src="http://i.imgur.com/p4thgQN.gif"/>
<img class="blush" src="http://i.imgur.com/k3gAtMu.png"/>
<img class="suicide" src="http://i.imgur.com/qXlE41t.gif"/>
<img class="corn" src="http://i.imgur.com/XkUEMN1.png"/>
<img class="bouquet" src="http://i.imgur.com/HYeXQ3U.gif"/>
<img class="sword" src="http://i.imgur.com/ZQQOGv8.gif"/>

</body></html>

有可行的方法吗？非常感谢

凯文·扬泽（Kevin Jantzer）

是的，只需添加一个包装<div>并使其定位relative

<div class="wrap">
// your images
</div>

.wrap {
  position: relative;
  background: white;
  width: 800px;
  height: 500px;
  margin: 0 auto;
}

body {
  background: lightpink;
}

.wrap {
  position: relative;
  background: white;
  width: 800px;
  height: 500px;
  margin: 0 auto;
  overflow: auto; /* not required */
}

img.laptop {
  position: absolute;
  background-image: none;
  left: 510px;
  top: 150px;
  width: 60px;
  z-index: 1
}
img.butterfly {
  position: absolute;
  background-image: none;
  left: 840px;
  top: 290px;
  width: 40px;
  z-index: -2
}
img.rose {
  position: absolute;
  background-image: none;
  left: 580px;
  top: 205px;
  width: 75px;
  z-index: -1
}
img.smiley1 {
  position: absolute;
  background-image: none;
  left: 460px;
  top: 490px;
  z-index: -2
}
img.smiley2 {
  position: absolute;
  background-image: none;
  left: 40px;
  top: 315px;
  z-index: -2
}
img.bouquet {
  position: absolute;
  background-image: none;
  left: 940px;
  top: 440px;
  width: 60px;
  z-index: -4
}
img.corn {
  position: absolute;
  background-image: none;
  left: 472px;
  top: 310px;
  width: 20px;
  transform: rotate(90deg);
  z-index: 1
}
img.sword {
  position: absolute;
  background-image: none;
  left: 250px;
  top: 20px;
  width: 320px;
  z-index: -3
}
img.blush {
  position: absolute;
  background-image: none;
  left: 1150px;
  top: 550px;
  z-index: -3
}
img.suicide {
  position: absolute;
  background-image: none;
  left: 210px;
  top: 700px;
  z-index: -3
}
img.skull {
  position: absolute;
  background-image: none;
  left: 1300px;
  top: 275px;
  width: 25px;
  z-index: -4
}

<div class="wrap">

  <img class="laptop" src="http://i.imgur.com/BFRmzfO.gif"/>
<img class="skull" src="http://i.imgur.com/2KO9rhQ.gif"/>
<img class="butterfly" src="http://i.imgur.com/Hzo21E9.gif"/>
<img class="smiley1" src="http://i.imgur.com/0t7i4D5.gif"/>
<img class="smiley2" src="http://i.imgur.com/howZ8iG.gif"/>
<img class="rose" src="http://i.imgur.com/p4thgQN.gif"/>
<img class="blush" src="http://i.imgur.com/k3gAtMu.png"/>
<img class="suicide" src="http://i.imgur.com/qXlE41t.gif"/>
<img class="corn" src="http://i.imgur.com/XkUEMN1.png"/>
<img class="bouquet" src="http://i.imgur.com/HYeXQ3U.gif"/>
<img class="sword" src="http://i.imgur.com/ZQQOGv8.gif"/>
  
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。