我已經創建了這個計數器應用程式，現在我想將按鈕、計數器和計數器編號放在我創建的這個玻璃盒的中心。
編輯：修復了代碼，添加了 css。
截圖：
HTML：
<div class="container">
<div class="inside-box">
<h1>Counter App</h1>
<h3 id="count-el">0</h3>
<button class='button-29' id="increment-btn" onclick="increment()">INCREMENT</button>
<button class='button-29' id="decrement-btn" onclick="decrement()">DECREMENT</button>
<button class='button-29' id="reset-btn" onclick="reset()">RESET</button>
<script src="/index.js"></script>
</div>
</div>
CSS：
body {
text-align: center;
background: linear-gradient(to right, #159957, #5468ff); /* W3C, IE 10 / Edge, Firefox 16 , Chrome 26 , Opera 12 , Safari 7 */
}
}
h1 {
font-family: "JetBrains Mono",monospace;
}
h3 {
font-family: "JetBrains Mono",monospace;
}
.container {
width: 30rem;
height: 20rem;
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
border-radius: 5px;
background-color: rgba(255, 255, 255, .15);
margin-left: auto;
margin-right: auto;
backdrop-filter: blur(5px);
}
inside-box {
text-align: center;
}
uj5u.com熱心網友回復：
試試這個：
body {
text-align: center;
background: linear-gradient(to right, #159957, #5468ff);
/* W3C, IE 10 / Edge, Firefox 16 , Chrome 26 , Opera 12 , Safari 7 */
}
h1 {
font-family: "JetBrains Mono", monospace;
}
h3 {
font-family: "JetBrains Mono", monospace;
}
.container {
display: flex;
align-items: center;
justify-content: center;
width: 30rem;
height: 20rem;
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
border-radius: 5px;
background-color: rgba(255, 255, 255, .15);
backdrop-filter: blur(5px);
}<div class="container">
<div class="inside-box">
<h1>Counter App</h1>
<h3 id="count-el">0</h3>
<button class='button-29' id="increment-btn" onclick="increment()">INCREMENT</button>
<button class='button-29' id="decrement-btn" onclick="decrement()">DECREMENT</button>
<button class='button-29' id="reset-btn" onclick="reset()">RESET</button>
<script src="/index.js"></script>
</div>
</div>uj5u.com熱心網友回復：
首先，設定父元素的位置屬性，也就是container 到relative。
接下來，將子元素的位置屬性設定為絕對，頂部為 50%，左側為 50%。
最后，使用 transform: translate(-50%, -50%) 真正使子元素居中，也就是內盒。
這將起作用。
您也可以使用 flexbox 方法。
在容器中添加以下內容：
display: flex;
justify-content: center;
align-items: center;
這更容易。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/347492.html
上一篇：從員工網頁上抓取期刊文章標題