html - 如何在 div 元素 (HTML) 中居中图像

问题描述

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

我在 HTML 中设置了 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>

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

  <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 和 O 不在各自的方框内居中。我的目的是让 X 和 O 相互重叠（以便我以后可以使用 javascript 启用和禁用它们的可见性）。我最初认为我可以通过边距或填充来解决这个问题。所以我为 X 图像设置了左填充，如下所示：

#X{
      height: 50%;
      width: 50%;
      padding-left: 16px
    }

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

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

那么我如何将 X（以及最终的 O）放在各自的框中？

标签： htmlcss

您可以通过利用relative和absolute定位来实现这一点。使用这些以及transform将很好地重叠和居中网格中的每个图像。

只是要注意; 您正在使用id="X"多个元素。ID 必须是唯一的，因此您不能多次使用同一个 ID - 我已将这些替换为下面代码段中的类。

.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)
    }

<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>

html - 如何在 div 元素 (HTML) 中居中图像

问题描述

解决方案

推荐阅读