Flexbox → Wrap

HTML & CSS
1

I have created a Pen here →

vertical-align: middle; is a table property. How do I accomplish the same in lex here so that the numbers get aligned vertically in center/middle.

2

This should give you what you need to know:-

2 Likes
3

I browsed that page, but couldn’t find how I can align the text in the vertical center also. Although you can see that my content is aligned in the horizontal middle(text-align: center;).

4

Maybe you need to browse a little further:-

align-items: center;
5

I tried that even before creating this post, but that actually aligns the boxes in the center. I mean that completely changes the whole HTML. My purpose is to align the text in each box in vertical center.

  1. Before
  2. After
6

For what you are doing a css table may be more appropriate.
You are using flex-wrap, but not allowing free wrapping by fixing the number in a row, creating a grid-like or table-like layout, for which a css table lends itself.

Giving even vertical padding to the boxes will increase their height, keeping the text centred. Otherwise you may need to nest flexes.

1 Like
7

Just change the box rules to this:

.box {
    width: calc(25% - 20px);
    margin: 10px;
  display:flex;
  align-items:center;
justify-content:center;
}

The beauty of flexbox is that flex items can be both flex items and flex containers.

3 Likes
8

Thanks. Dancing moments for me. Can we bookmarks post here by creating our categories.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.