Question

我一直在努力解决的一个快速问题。

我想找到一种方法将我用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>

有没有合理的方法呢？非常感谢

Answer 1

是的，只需添加一个包裹<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>

Answer 2

这里的简单解决方案：

看看我在这里为您制作的codepen：codepen.io/daplo/pen/qRyPEx

<style>
img {
  display: inline-block;
  margin:10px;
}
.wrap {
  width:100%;
  text-align: center;
}
</style>
<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>

如何将一组css定位的图像居中，两边都有边距？

2 个答案: