Centering with align-items center everything but not left-aligned

Question

Thank you for reading the post. I'm having a weird issue with Flexbox. I have a div container with some divs that need to be displayed 3 items in a row, 2 items for screen sizes less than 992 and 1 item for less than 568.

To achieve this I used display: flex and flex-wrap: wrap to the container and flex: 1 0 26% to the inner divs. It seems to be working fine but the problem is with the inner contents of the divs. They are all left-aligned.

I then used display: flex, flex-direction: column and align-items: center to the inner container but then all the inner contents get centered but not left-aligned.

Here's the issue:

Here's what I've been trying to achieve:

Here's the snippet:

#topic-list {
  display: flex;
  flex-wrap: wrap;
}

#topic-list div.list-wrapper {
  flex: 1 0 26%;
  margin: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

Yadab · Accepted Answer

You can have one more div inside the list-wrapper and make its text align left.

#topic-list {
  display: flex;
  flex-wrap: wrap;
}

#topic-list div.list-wrapper {
  flex: 1 0 26%;
  margin: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.test {
  text-align: left;
}

Centering with align-items center everything but not left-aligned

Answers (1)

Related Questions