Centering Image with centre align clashing with Position In CSS
Question
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
1 answers
solution1
0 2021-12-06 11:41:48
#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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.