Question

我尝试将div集中在我的页面上。它应该只使用相对值，因此它的大小仅取决于窗口大小我找到了一个解决方案，它使盒子居中，但似乎没有正确计算边距。相反，body的大小比窗口大。在下面的示例中，firebug告诉我，#container框在屏幕上的大小为1265x335。当检查#content时，它的大小是506x134，每边是2px边界，这与我的计算相符。但最高利润率是316。

我有什么不对吗？保证金应为335的25％，对吧？我该如何解决这个问题？

这是HTML：

<body>
  <div id="container">
    <div id="content">
      nothing...
    </div>
  </div>
</body>

这里是CSS：

html {
  height:            100%;
}

body {
  height:            100%;
  margin:            0em 0em 0em 0em;
}

#container {
  height:            100%;
}

#content {
  text-align:        center;
  width:             40%;
  height:            40%;
  margin-top:        25%;
  margin-left:       auto;
  margin-right:      auto;
  margin-bottom:     auto;
  border:            2px solid black;
}

Answer 1

来自http://www.w3.org/TR/CSS2/box.html：

百分比是根据生成的框的包含块的宽度计算的。请注意，对于'margin-top'和'margin-bottom'也是如此。

所以你得到了1265的25％，这解释了你所看到的行为。不幸的是，我没有提供任何解决方案。

编辑：CSS3使此声明取决于包含块是否为horizontal（您希望它是垂直的）。我不认为任何浏览器都会实现所需的block-progression属性（无论如何它可能会产生意想不到的副作用）。

margin-top未按预期计算

1 个答案: