我有以下 CSS 代碼，它是我正在開發(fā)的網(wǎng)站中使用的更大 CSS 代碼的一部分：
.cards-u {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.card-u {
margin: 20px;
padding: 20px;
width: 160px;
height: 160px;
line-height: 120px;
justify-content: center;
align-items: center;
text-align: center;
align-self: center;
flex-direction: column;
border-radius: 10px;
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
transition: all 0.2s;
text-decoration: none;
}
.card-1-u {
background: radial-gradient(#1fe4f5, #3fbafe);
}
在 HTML 代碼中我有：
<div class="cards-u"> <a href="https://example.com" class="card-u card-1-u" style="text-decoration: none;"> <h3>Text Sample 1</h3> </a> <a href="https://example.com" class="card-u card-1-u" style="text-decoration: none;"> <h3>Text Sample 2</h3> </a> </div>
但是文本 Text Sample 1 和 Text Sample 2 并未垂直居中，而是位于 Flexbox 的頂部。
看起來我的大型 CSS 代碼中的某些內(nèi)容正在干擾，但我不知道是什么。
我的問題是假設(shè)我們不知道 CSS 的其余部分是什么，我們可以強(qiáng)制這部分執(zhí)行我們想要的操作，即將文本在彈性框中垂直居中嗎？
1
0
0
發(fā)生這種情況是因?yàn)?.cards-u 沒有定義任何高度。它將內(nèi)容的高度作為自身的高度并將內(nèi)容保持在該區(qū)域內(nèi)。
您應(yīng)該使用 100vh 為 .cards-u 提供完整頁面高度，或者執(zhí)行以下操作：
.cards-u{
position: relative;
}
.card-u{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
