在 CSS 中，居中對齊的圖像與 Position 沖突

Question

我是 html 和 css 的新手，最近我開始制作 canvas 游戲。 我希望有一個圖像並將其與 HTML 對齊在 canvas 的中心。 我使用了“位置：絕對”屬性，至少可以將其放在 canvas 上，但是當我使用“文本對齊：中心”屬性時，我的 position 屬性停止工作並低於 ZFCC790C72A86190DE51B549D0DZDC6。

所以我想知道，如何將我的圖像集中在 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>

請注意：我經歷了大約 5 到 6 個關於同一主題的 Stack Overflow 問題，但找不到任何解決方案

Answer 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>

在 CSS 中，居中對齊的圖像與 Position 沖突

問題描述

1 個解決方案

解決方案1
0 2021-12-06 11:41:48

在 CSS 中，居中對齊的圖像與 Position 沖突

問題描述

1 個解決方案

解決方案1 0 2021-12-06 11:41:48

解決方案1
0 2021-12-06 11:41:48