I am new to html and css and recently I started making a canvas game. I wish to have an image and align it in the centre of the canvas with HTML. I used the 'position: Absolute' property and could at least put it on the canvas but when I used the 'text-align: centre' property, my position property stopped working and came below the canvas.
So I wanted to know, how I can centre my image on the canvas.
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>
Please Note: I went through about 5 to 6 Stack Overflow questions regarding the same topic but couldn't find any solution
#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>