CODEWITHSUNDEEP
htmlcenteringcard
Loopy
Loopy

Reputation: 1

Centering cards

I am having trouble centering these cards:

Having trouble centering these cards

I searched on google and stack overflow, but cannot find the solution. I'm trying to center these cards but cannot, I've tried display flex, justify-content center, and align-items center with no luck along with many other solutions posted online but still can't fix it.

Upvotes: 0

Views: 35

Answers (1)

cSharp
cSharp

Reputation: 3159

If you did really set align-items and justify-content, I suspect you did not set the width of the container element to stretch, hence, it is hugging the contents and sticking to the left.

Try as below:

.container {
  /*I suspect this has not been set*/
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: blue;
  padding: 0.5rem;
}

.card {
  /*placeholder width & height*/
  width: 10rem;
  height: 10rem;
  background-color: red;
  margin-bottom: 2rem;
}
<div class="container">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>

</div>

Also this is a bit irrelevant, but are your single cards cards and the container card? Why? I think it's much more intuitive if it was multiple cards inside a cards container.

Upvotes: 1

Related Questions