Question

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

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

<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现在就在后面......¿为什么？我也尝试了继承定位，结果是一样的。我不知道如何解决这个问题，我非常感谢你能给我的任何帮助。

Answer 1

如果要将容器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重新安排元素的堆栈级别

<div> over <canvas> ...在另一个<div> </div> </canvas> </div>中

1 个答案: