Question

我正在尝试使用HTML，CSS，Javascript创建一个简单的井字游戏应用程序。

我已经在HTML中设置了X和O图像，如下所示：

data.table

我正在使用CSS网格将HTML中的每个div排列为一个单元格（在X和O内将显示出来）。

<body>
  <div class="wrapper">
    <div>
      <img src="X.png" alt="X" id="X">
      <img src="O.png" alt="O" id="O">
    </div>
    <div>
      <img src="X.png" alt="X" id="X">
      <img src="O.png" alt="O" id="O">
    </div>
    <div>
      <img src="X.png" alt="X" id="X">
      <img src="O.png" alt="O" id="O">
    </div>
    <div>
      <img src="X.png" alt="X" id="X">
      <img src="O.png" alt="O" id="O">
    </div>
    <div>
      <img src="X.png" alt="X" id="X">
      <img src="O.png" alt="O" id="O">
    </div>
    <div>
      <img src="X.png" alt="X" id="X">
      <img src="O.png" alt="O" id="O">
    </div>
    <div>
      <img src="X.png" alt="X" id="X">
      <img src="O.png" alt="O" id="O">
    </div>
    <div>
      <img src="X.png" alt="X" id="X">
      <img src="O.png" alt="O" id="O">
    </div>
    <div>
      <img src="X.png" alt="X" id="X">
      <img src="O.png" alt="O" id="O">
    </div>
  </div>
</body>
</html>

结果网页如下：

现在您可以看到，X和O不在每个框的中间。我的意图是使X和O彼此重叠（以便以后可以使用javascript启用和禁用它们的可见性）。我最初以为我可以通过边距或填充来解决此问题。因此，我将X图像的左填充设置为：

  <style>
    .wrapper{
      display:grid;
      grid-template-columns:100px 100px 100px;
      grid-template-rows:100px 100px 100px;
      grid-gap:10px;
    }

    .wrapper > div{
      background:#eee;
      padding:1em;
    }

    #X{
      height: 50%;
      width: 50%;
    }

    #O{
      height: 50%;
      width: 50%;
    }

  </style>

这成功地将X图像在水平轴上的每个框中居中。

但是，当我尝试将padding-top添加到X（以使其垂直居中）时，X返回其初始位置（如第一幅图所示）。

那么我如何将X（最后是O）放在各自的框中？

Answer 1

您可以利用relative和absolute定位来实现这一点。结合使用transform和id="X"可以很好地重叠并在网格中居中放置每个图像。

仅需注意；您在多个元素上使用.wrapper{ display:grid; grid-template-columns:100px 100px 100px; grid-template-rows:100px 100px 100px; grid-gap:10px; } .wrapper > div{ background:#eee; padding:1em; position:relative; } .X, .O { position:absolute; top:50%; left:50%; transform:translate3d(-50%, -50%, 0) }。 ID必须是唯一的，因此您不能一次使用同一ID-我在下面的代码段中将这些替换为类。

<div class="wrapper">
  <div>
    <img src="https://placeimg.com/50/50/animals" alt="X" class="X">
    <img src="https://placeimg.com/50/50/arch" alt="O" class="O">
  </div>
  <div>
    <img src="https://placeimg.com/50/50/animals" alt="X" class="X">
    <img src="https://placeimg.com/50/50/arch" alt="O" class="O">
  </div>
</div>

Answer 2

如果您希望2个元素相互重叠，则应给它们position: absolute;并在其周围进行一个包含position: relative;的div

.column{
  position: relative;
  width: 200px;
  height: 200px;
}

.column img{
  position: absolute;
  width: 200px;
  height: 200px;
}

<div class="column">
   <img src="https://www.pinclipart.com/picdir/middle/99-992857_inner-page-closing-comments-tic-tac-toe-x.png" alt="X" id="X">
   <img src="http://pluspng.com/img-png/letter-o-png-open-2000.png" alt="O" id="O">
</div>

但是在代码中，您应该做到这两个元素都位于display: none;上，这样在您将元素设为display: block;之前，它将不使用任何空间。由于在您要担心图像重叠时，display: block;仅是1个元素。

Answer 3

尝试一下：

import matplotlib.pyplot as plt
import numpy
from IPython.display import display
import ipywidgets

# Don't want continuous_update=False
widg = ipywidgets.FloatSlider(value=.5,min=0,max=1,step=.01)
output = ipywidgets.Output()

def update_plot(msg):
    # ??? if there are further changes queued: return
    a = widg.value  # or msg['new']
    x = numpy.linspace(0,1,100)
    plt.plot(x, (x>=a) & (x<=a+.2))
    plt.ylim(-.02,1.02)
    output.clear_output(wait=True)
    with output:
        plt.show()

widg.observe(update_plot, 'value')

display(ipywidgets.VBox([widg, output]))
update_plot(None)

如何在div元素（HTML）内居中放置图像

3 个答案: