Ich habe den folgenden CSS-Code, der Teil eines größeren CSS-Codes ist, der in einer Website verwendet wird, die ich entwickle:
.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);
}
Im HTML-Code habe ich:
<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>
Aber der Text Text Sample 1 和 Text Sample 2 ist nicht vertikal zentriert, sondern oben in der Flexbox.
Es sieht so aus, als würde etwas in meinem großen CSS-Code stören, aber ich weiß nicht was.
Meine Frage lautet: Angenommen, wir wissen nicht, was der Rest des CSS ist. Können wir diesen Teil zwingen, das zu tun, was wir wollen, nämlich den Text in der Flexbox vertikal zu zentrieren?
发生这种情况是因为 .cards-u 没有定义任何高度。它将内容的高度作为自身的高度并将内容保持在该区域内。
您应该使用 100vh 为 .cards-u 提供完整页面高度，或者执行以下操作：
.cards-u{ position: relative; } .card-u{ position: absolute; top: 50%; transform: translateY(-50%); }