<分区>
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 图像在水平轴上居中。
但是，当我尝试向 X 添加 padding-top(使其垂直居中)时，X 回到其初始位置(如第一张图片所示)。
那么我如何将 X(以及最终的 O)放在各自的盒子中？
最佳答案
您可以利用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)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58482181/