Soy nuevo en html y css y recientemente comencé a hacer un juego de lienzo. Deseo tener una imagen y alinearla en el centro del lienzo con HTML. Usé la propiedad 'posición: Absoluta' y al menos pude ponerla en el lienzo, pero cuando usé la propiedad 'text-align: center', mi propiedad de posición dejó de funcionar y quedó debajo del lienzo.
Así que quería saber cómo puedo centrar mi imagen en el lienzo.
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>Tenga en cuenta: revisé entre 5 y 6 preguntas de desbordamiento de pila sobre el mismo tema, pero no pude encontrar ninguna solución
#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>