Streaming live at 10am (PST)

Vertically centering pagination on collection grid

Hello!

I have been looking for hours for a solution to the below problem, and would really appreciate any help!

I have set up a paginated collection grid on my homepage to display blog posts. It show 4 x posts per page (12 in total).

I’m try to position the previous and next buttons in the pagination element. What I really want is for them to be vertically centered either side of the collection grid (like the attached screenshot)

.

My collection wrapper is set as as block

My collection list is set to ‘grid’, align and justify as ‘stretch’

My collection items are set as flex, vertical align: start

Any help would be so appreciated! It seems like a really simple thing to want to do!!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

If you need pagination arrows on either side, the answer can be found on this youtube video around 2:30: New Feature | Pagination for collection lists in Webflow - YouTube

You make the collection wrapper a horizontal flexbox, then duplicate the pagination control. Place one on either side of the collection. Then set the visibility to none on whichever button needs to be hidden.
I set my controls not to shrink and gave them a minimum width to prevent the flexbox from hiding them when the browser sizes down.