[英]How to center div apparently inside canvas?
我正在使用 JavaScript 制作蛇游戲,並且正在嘗試添加“暫停菜單”功能。 當用戶單擊暫停圖標時,我設法使菜單出現,但我希望我可以使菜單出現在呈現游戲的 canvas 內的中心。 這就是我得到的:
如何使它看起來像在 canvas 內居中? 我知道我可以通過將 margin-left、margin-right 等設置為某個數字來實現這一點,但這在我的情況下效果不佳,因為我的網站應該響應 window 調整大小。 我希望該菜單保持幾乎相同的尺寸,無論 window 的寬度是多少。 這是 HTML:
<div class="body-divs">
<div id="score-div">
<span id="score-text"></span>
<span id="level-text"></span>
<button id="pause-button"><i id="pause-resume-icon" class="fa fa-pause" aria-hidden="true"></i></button>
</div>
<div id="pause-menu">
<span class="menu-text"> Paused </span>
<div id="game-menu-div-4">
<button class="game-menu-button" id="resume-button"> Resume </button>
<button class="game-menu-button" id="back-button"> Main Menu </button>
</div>
</div>
<canvas class="body-divs" id="stage" width="600" height="600">
</canvas>
</div>
這是 CSS:
.body-divs, #score-div{
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
margin-top: 5%;
}
#pause-menu {
position: absolute;
font-family: 'Manaspace';
padding: 10px;
background-color: yellow;
text-align: center;
max-width: 250px;
width: 100%;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-color: gold;
border-radius: 4px 4px;
}
#resume-button, #back-button {
margin: 10px;
}
#resume-button {
font-size: 22px;
}
#back-button {
font-size: 15px;
}
您可以將#pause-menu
和canvas
放在具有position: relative
的共享.container
父級中,然后使用position: absolute
top: 50%; left: 50%; transform: translate(-50%, -50%)
#pause-menu
居中top: 50%; left: 50%; transform: translate(-50%, -50%)
top: 50%; left: 50%; transform: translate(-50%, -50%)
使其居中在canvas
。 例子:
.container { position: relative; } #pause-menu { position: absolute; font-family: 'Manaspace'; padding: 10px; background-color: yellow; text-align: center; max-width: 250px; width: 100%; margin-left: auto; margin-right: auto; border-style: solid; border-color: gold; border-radius: 4px 4px; top: 50%; left: 50%; transform: translate(-50%, -50%); } #resume-button, #back-button { margin: 10px; } #resume-button { font-size: 22px; } #back-button { font-size: 15px; }
<div id="score-div"> <span id="score-text"></span> <span id="level-text"></span> <button id="pause-button">pause</button> </div> <div class="container"> <div id="pause-menu"> <span class="menu-text"> Paused </span> <div id="game-menu-div-4"> <button class="game-menu-button" id="resume-button"> Resume </button> <button class="game-menu-button" id="back-button"> Main Menu </button> </div> </div> <canvas class="body-divs" id="stage" width="600" height="600"></canvas> </div>
#pause-menu {
position: relative;
帶有 position 的元素:絕對; 相對於最近的定位祖先定位(而不是相對於視口定位,如固定)。
然而; 如果絕對定位元素沒有定位的祖先,它使用文檔正文,並隨着頁面滾動移動。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.