当div离开屏幕的一侧时，在容器div中动态居中？ （水平导航布局）

Question

我有一个水平布局的网站（只有一系列包含在div中的6个草图，不用担心可用性与奇怪的导航风格）。

为此，我宣布了一系列相对定位的div部分，一个接一个，从左到右。在它们中，我有一个包装div，我计划用它来轻松放置，最后是一个内容div，用于保存我的图像/文本。

但是，我把自己编成了一个角落，我不知道如何离开。

我想在每个相应的部分中将包装器（以及内容）div水平和垂直居中。

然而我不能这样做，因为我不知道用户的屏幕扩展或收缩时的宽度。

实施例： 我的整体身高是1200px宽。每个部分宽2000像素。每个包装器和内容都包含在。

中

• 我不能声明“margin：0 auto;”在我的包装物品上，因为它将把包装物放在WHOLE 2000px宽幅部分的中间......
• 事实上，如果我的数学没有关闭，它会将它定位在大约500像素左右

我编写了一个小片段来向您展示问题：

html { height: 100%; }

body{
    height: 100%;
    width: 12000px;
    overflow: hidden; 
}

.section {
    height:  100%;
    background: url("../images/large-swirls.jpg") repeat scroll top right #fff; 
    float: left;
    position: relative;
    width: 2000px; /* I've declared it big enough to see my swirl image */
    z-index: 0 !important;
}

.wrapper {
    /* This is where I should center it horizontally and vertically */
    /* I can't use margin: 0 auto; because the wrapper is in a 2000px container */
}

.content {
    background: #ccc;
    border: 1px solid black;
    margin: 0 auto; /* The content is cleanly centered in my little box */
    width: 1000px;
}


<div class="section" id="sketch1">
    <div class="wrapper">
        <div class="content">
            <p>Hello. I'm one of the sketch sections.</p>
        </div>
    </div>
</div>

基本上，任何人都可以告诉我如何安排它，以便我可以将内容div集中在哪些部分基本上从页面的右侧运行？我只是不知道如何为包装类声明这样的东西。

我怀疑答案可能在于某种立场：绝对选择？ （但我不确定，从未使用过那么多）。

我也尝试在其他水平可导航的网站上寻找创意，但他们似乎都将内容对齐到左侧，然后将填充放在一边，例如padding-left：500px ..如果你在大屏幕上看起来不太好看。它当然不是我所瞄准的中心。

对某些想法有任何帮助吗？ =）

Answer 1

有趣的问题。你不会相信我已经尝试了多少次只是将愚蠢的idv 放在页面上（水平和垂直）。我迄今为止提出的最佳解决方案是使用表格。如果我想要一个总是位于屏幕中间的盒子而不管窗口调整大小，我将制作一个单元格表并使用它的v和h对齐属性（设置为中间）。使用您的站点，您可以将每个部分包装在一个表中并浮动表。不是最干净的解决方案，但不幸的是，对于我们这些想要集中体力的人来说，那里（除了一些凌乱的javascript之外）几乎没有任何帮助。

表格阴影框的快速示例......事情：

<table width="100%" height="100%" style="background-color:#ddd" border="0">
  <tbody>
  <tr>
    <td align="middle">
      <div>The Centered Element</div>
    </td>
  </tr>
  </tbody>
</table>