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居中，必须确保其父级具有设定的宽度。这可能是您的正文标记或作为容器的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
}

P.S。即使它不是记录在案的东西，通常.wrapper也不在.container之内。它们通常不是同一个元素。

p.p.s。您必须使用百分比作为绝对元素，以便在不同设备上正确缩放。如果你有left:700px，那么它总是从左边700px。如果它是left:10%，那么它将扩展到其容器的宽度。

Answer 2

如果我理解你的需要，我不是百分百肯定，但我会给你2个答案。

首先，最直接的方法是设置width:90%和text-align:center

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

如果您希望内部元素居中，请

添加text-align:center;;

如果你知道div的宽度，一个很好的CSS方法来中心任何具有绝对定位的div是将左边设置为50％，边距设置为div的宽度的1/2;

div {
 position:absolute;
 width:500px;
 left:50%;
 margin-left:-250px;
}

希望这有帮助！

如何以我的情况为中心的相对div？

2 个答案: