Flexbox positioning Options

[Brian Chandler]

I have a puzzle search page here:
OLD: https://imaginatorium.org/shop/show.php?gen...&orient=any
This outputs the puzzles found in a table, with four columns.

Flexbox is basically a huge improvement, because of course I don't really want to use a table. But here is the new version:
NEW: https://imaginatorium.com/show.php?genre=bo...&orient=any

I just produce a string of boxes, and they get laid out nicely, except...

In a table, vertical_align aligns the content of a TD in the vertical direction, and of course it does what I what, putting the content (thumbnail image and bits of text) centred. But this does not work in a flexbox, so I arrive at the following :
https://www.w3schools.com/css/css3_flexbox_...asp#align-items
(These pages are pretty bad, but there are handy 'Try it' pages set up to check stuff.)


Now this "align-items" turns out to mean vertically (I suppose it would be too much to ask for anyone competent in the English language to be involved in any of this), and indeed, if I put "center" my thumbnail containing box appears vertically centred. But this means that the frame of the box is of many different sizes; the default setting of "stretch" seems to be the only way to make the boxes of consistent size.

So I try putting the actual content inside another div (the temporary red border in NEW above). Then I find I have no idea whether it is even possible to make a div centred vertically within another div. Setting "margin: auto 0" does not appear to work. Any suggestions?

[Brian Chandler]

Yes, I have done it now: the point is that the answer is "div soup", or nested divs for no reason other than that the formatting power of a single div layer is not enough. (I want the content centred, but the border filling the frame.)}

The aha! moment was realising that the flexbox provides a better implementation of div than plain div does...