0

我有一个奇怪的问题，我无法解决。它应该与我读过的关于 and 之间关系的其他问题相同，但这是另一回事。让我解释一下这一切：

首先，我一直在使用这段代码。这可以正常工作：

<canvas id="canvas" width="1068" height="814" style="position: absolute; top: 0px; left: 0px; border:1px solid #707070; z-index:-15;">
Tu browser no soporta canvas
</canvas>

<div id="contenedorpregunta" style="background-color: transparent; position: absolute; top: 170px; left: 110px; width: 500px; height: 455px; z-index:5;">
(...)
</div>

这显示了画布上预期的 div 内容，两者都附加到 0,0。

现在，相反，我需要以网页为中心显示游戏，所以，我想到了这一点。

<div align="center">
  <canvas style="position: relative;  (...)">
  </canvas>

  <div id="contenedorpregunta" style=" position: relative;(...)">
  </div>
</div>

这不起作用，以前在画布上的 div 现在就在后面……¿为什么？我也尝试过继承定位，结果是一样的。我不知道如何解决这个问题，如果你能给我任何帮助，我将不胜感激。

4

1 回答 1

0

如果您想在网页中水平居中容器 div，只需为容器元素提供宽度并使用margin: auto;这就是您所需要的，如果您想水平居中和垂直居中，则需要使用position: absolute;

.totally_centered {
   height: 500px;
   width: 300px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-top: -250px; /* Half of container height */
   margin-left: -150px; /* Half of container width */
}

而且，如果您仍然对 div 落后的原因感到困惑，我不知道它为什么落后以及如何落后，但您可以使用它z-index来重新安排元素的堆栈级别

于 2013-02-08T11:49:30.047 回答