居中对齐的图像与 CSS 中的位置冲突
Posted
技术标签:
【中文标题】居中对齐的图像与 CSS 中的位置冲突【英文标题】：Centering Image with centre align ***ing with Position In CSS 【发布时间】：2022-01-11 14:10:36 【问题描述】：我是 html 和 css 的新手，最近我开始制作画布游戏。我希望有一个图像并将其与 HTML 对齐在画布的中心。我使用了 'position: Absolute' 属性，至少可以将它放在画布上，但是当我使用 'text-align: center' 属性时，我的 position 属性停止工作并位于画布下方。
所以我想知道，我如何才能使我的图像在画布上居中。
CSS
#startgameimg
text-align:center;
width: 50px;
display:block;
margin:auto;
position: absolute;
cursor: pointer;
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GAME</title>
<link href = "style.css" rel = "stylesheet">
</head>
<body>
<div style = "text-align: center;">
<canvas
id = "canvas"
height = "560"
width = "800"
style = "border:5px solid rgb(33, 8, 61)"
>Your Browser is Not Supported</canvas>
<div id = 'start'>
<img src = "play.png" alt = "" id = "startgameimg"/>
</div>
</div>
<script src = "script.js" ></script>
</body>
</html>
请注意：我经历了大约 5 到 6 个关于同一主题的 Stack Overflow 问题，但找不到任何解决方案
【问题讨论】：
显示：弹性；证明内容：中心；对齐项目：居中；使用它并检查 【参考方案1】：#startgameimg
text-align:center;
width: auto;
display:block;
margin:auto;
position: absolute;
cursor: pointer;
top:50%;
left:50%;
transform:translate(-50%, -50%)
<div style = "text-align: center; position: reletive">
<canvas
id = "canvas"
height = "560"
width = "800"
style = "border:5px solid rgb(33, 8, 61)"
>Your Browser is Not Supported</canvas>
<div id = 'start'>
<img src = "play.png" alt = "MY IMG" id = "startgameimg"/>
</div>
</div>【讨论】：
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。 非常感谢。很有帮助以上是关于居中对齐的图像与 CSS 中的位置冲突的主要内容，如果未能解决你的问题，请参考以下文章