0

I have the following CSS code, which is part of a much bigger CSS code used in the website I am working on:

.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);
}

and in the HTML code I have:

<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>

but the texts Text Sample 1 and Text Sample 2 are not centered vertically and are at the top of the flexbox. It seems something from my large CSS code is interfering, but I don't know what. My question is assuming we don't know what is the rest of the CSS, can we force this part to do what we want, which is centering the text vertically inside the flex boxs?

TJ1
  • 7,578
  • 19
  • 76
  • 119
  • You gonna have to reproduce it. Try checking the computed styles in the inspect element and deleting other html nodes to debug. – user31782 Dec 04 '22 at 06:03

1 Answers1

0

This is happening becuase .cards-u doesn't have any height defined. Its taking the content's height as its own height and keeping the content within that area.

You should either give .cards-u full page height using 100vh or do like:

.cards-u{
  position: relative;
}

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

}
Ameer Hamza
  • 16
  • 2
  • Thanks for the response. I tried adding: `height: 100vh;` to the .cards-u, but nothing changed. – TJ1 Dec 04 '22 at 05:55
  • when you add height: 100vh.. make sure you check with dev tools if it is occupying whole page or not. They key here is to make the outer parent element occupy full height and then use flex box to center align your content – Ameer Hamza Dec 04 '22 at 06:28
  • Yes, I checked and it is occupying the whole page. But still not helping. – TJ1 Dec 04 '22 at 06:36