How to center a dynamic list

Design help General
1

I have a five column dynamic list. Each column is 20% in width.
On some pages, I will be showing a fully filled list with 5 items. These work fine.
However, when I apply category filters and show only three items, the list always float to the left, leaving the right columns as empty space.
Is there any way to hack the css so that the list items always appear in the center of the wrapper no matter how many items are displayed?
I’d like to use this dynamic list on multiple pages with different filters.
My list is done in 20% width divs, not dynamic list columns because there is no option to accommodate 5 columns in one row.

994×1553 448 KB

Thank you! Really appreciate your time!

2

Never worked with dynamic content before but i do know that you can do this when you put your items in, let’s say a div:

800×320 277 KB

1 Like
3

Also, if you will make your dymanic items display: inline-block and show list not like columns but like items stuck on each other, then you can make items shows like you wish by giving them about 20% width and make dymanic list content aligning to center (like font aligning).

1 Like
4

Hi DharmaNode,

Thank you so much for the reply, really appreciated the animation. Unfortunately, webflow does not allow me to insert a div within a dynamic list. But thanks any way for the tip! Would be useful for situations without dynamic content.

5

Thanks, sabanna! Do you mean adding a style to individual list items and set display to inline-block will solve the issue? Do I need to set float values?

Thank you.

6

Ye, it is what I mean. And no, no float :smiley: Other way you will be not able to center items.

7

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