jquery - 在我的情况下如何使相对 div 居中？

Question

我需要创建一个包含绝对 div 的相对 div。

我还需要相对 div 在桌面和 ipad 上以不同的分辨率为中心。

我有这样的东西:

 <div class='container wrapper'>
        <a id='link1' href='#'><img src='img1.png'/></a>
        <a id='link2' href='#'><img src='img2.png'/></a>
        <a id='link3' href='#'><img src='img3.png'/></a>
        <a id='link4' href='#'><img src='img4.png'/></a>
        <a id='link5' href='#'><img src='img5.png'/></a>
    </div>


.wrapper{
    position: relative;      
    top:10%;
    left:5%;
    height: 800px;
}

#link1{
    position: absolute;
    top: 250px;
    left: 0;
}
#link2{
    position: absolute;
    top: 0;
    left: 350px;
}
#link3{
    position: absolute;
    top: 280px;
    left: 700px;
}
#link4{
    position: absolute;
    top: 600px;
    left: 580px;
}
#link5{
    position: absolute;
    top: 580px;
    left: 180px;
}

我需要使用绝对定位，因为我的元素不遵循常规流程。

他们很像

      ----
     |    |
     |    |    ---
      ----    |   |
              |   |
 ----          ---
|    |
|    |     ---
 ----     |   |      ---
          |   |     |   |
           ---      |   |
                     ---

我不确定如何查看我的 .wrapper div 的 CSS。有人可以帮我吗？谢谢。

Answer 1

要使您的 .container 居中，您必须确保其父级具有设置的宽度。这可以是您的 body 标签或作为容器的 div。

然后，你可以给你的容器一个宽度和一个自动边距，如下所示:

.container {
    width:960px;
    margin: 0 auto;
}

margin:0 auto; 等同于:

margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;

如果您的 .container 是绝对定位的，您可以通过确保其父项具有宽度来将其居中，然后您可以执行以下操作:

.container {
    width:960px;
    position:absolute;
    left:50%;
    margin-left:-480px; //This is NEGATIVE HALF of the width of the div
}

附注尽管它不是文档化的东西，但通常 .wrapper 在 .container 之外。它们通常不是同一个元素。

p.p.s.您必须对绝对元素使用百分比，这样它才能在不同设备上正确缩放。如果您有 left:700px，那么它将始终距离左侧 700px。如果它是 left:10%，那么它将缩放到其容器的宽度。