(SOLVED) Grid within flexbox will not align

1

Hi Guys,

First time poster over here.

I’m trying to center align items in a flex column. The problem is that the flex colum contains a stack of grid elements, which seem to be immune to every alignement trick I come up with (margin/padding: 0 auto, justify content, align self).

Here is my codepen: https://codepen.io/pwkrz/pen/XZaqVr. The issue is present in window widths < 768px.

Please help!

2

Rather than applying the flex and alignments to the listItem <li>, you should look at setting flex and justify-content: center to the HTML being created in the img and button variables.

As the divs being added to the to li are block level elements, so they are already full width, you need to target the stuff within that div.

1 Like
3

Thank you for the suggestion! It led me to try out “text-align”, which I earlier (for some reason) assumed would 100% not work. Turns out it did :slight_smile:

So the magic piece of code was:

  [class^="col"] {
    text-align: center;
  }