Gibt es eine Möglichkeit, die vertikale Zentrierung des Texts in der Flexbox zu erzwingen, unabhängig davon, welchen anderen CSS-Code wir haben?
P粉757556355
P粉757556355 2024-04-06 20:41:51
0
1
801

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 1Text 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?

P粉757556355
P粉757556355

Antworte allen(1)
P粉238355860

发生这种情况是因为 .cards-u 没有定义任何高度。它将内容的高度作为自身的高度并将内容保持在该区域内。

您应该使用 100vh 为 .cards-u 提供完整页面高度,或者执行以下操作:

.cards-u{
  position: relative;
}

.card-u{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

}
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage