有没有办法强制弹性框中的文本垂直居中,无论我们有什么其他 CSS 代码?
P粉757556355
P粉757556355 2024-04-06 20:41:51
0
1
762

我有以下 CSS 代码,它是我正在开发的网站中使用的更大 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 1Text Sample 2 并未垂直居中,而是位于 Flexbox 的顶部。 看起来我的大型 CSS 代码中的某些内容正在干扰,但我不知道是什么。 我的问题是假设我们不知道 CSS 的其余部分是什么,我们可以强制这部分执行我们想要的操作,即将文本在弹性框中垂直居中吗?

P粉757556355
P粉757556355

全部回复(1)
P粉238355860

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

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

.cards-u{
  position: relative;
}

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

}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!