我是 HTML 和 StackOverflow 的初學者，正在嘗試創建一個網頁。我通過一些研究學會了如何創建這個網格，但我不確定如何將它與網頁的中心對齊。我嘗試使用 justify-content: center; 但沒有運氣。幫助將不勝感激。
實際網頁
CSS 代碼：
.image-grid {
--gap: 16px 16px;
--num-cols: 4;
--row-height: 40px;
padding: var(--gap);
display: grid;
grid-template-columns: repeat(var(--num-cols), 1fr);
grid-auto-rows: car(--row-height);
gap: var(--gap);
}
img {
border-radius: 15px;
border: 5px solid;
}
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 150px;
height: 150px;
}
.overlay {
position: absolute;
top: 5px;
bottom: 0;
left: 5px;
right: 0;
height: 150px;
width: 150px;
opacity: 0;
transition: 0.5s ease;
border-radius: 10px;
background-color: rgb(149, 69, 53);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: black;
font-family: "Courier New", Courier, monospace;
font-size: 20px;
font-weight: bold;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Html 代碼（我的網格中有 16 張圖片，所以基本上重復了 16 次）：
<div class="image-grid">
<div class="container">
<img
src="picture"
alt="Avatar"
class="image"
/>
<div class="overlay">
<div class="text">Angelite<br /><br />STONE OF AWARENESS</div>
</div>
</div>
<div>
uj5u.com熱心網友回復：
你是說這個嗎？
.image-grid {place-items: center;}
順便注意你的最后一行！不要忘記關閉標簽！
uj5u.com熱心網友回復：
要在網格內居中影像：
你width: 50%;在你.container的導致這個問題。
洗掉它，然后應用justify-items: center;到.image-grid.
uj5u.com熱心網友回復：
div {
display: grid;
place-items: center;
}
試試這個
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/480326.html