3 Ways to Vertically Align Buttons in Divi

by | Oct 31, 2016 | Tutorial

How do I vertically align buttons across columns?

or

How do I line up buttons at the bottom of my tiles?

These questions get asked a lot. Why? Because they’re really good questions and not something you can do out of the box with Divi. They’re good questions because the scenario the need pops up in is related to a very common pattern or layout you see in web design. A series of tiles, standing next to each other, with varying amounts of content. Divi addresses 50% of the issue really well with the “Equalize Column heights” option in the row settings. This visually sets the tiles to the same height, but it doesn’t address the other half, which is having the components of each of the tiles line up.

Well, I know of 3 methods for lining them up. There may be others, but these are the 3 I’ve stumbled upon in my travels. Hopefully, they can help you out.

Method 1

The Duplicate & Display Rules method

Difficulty Level: 1/5

Method 2

The min-height CSS method

Difficulty Level: 2/5

Method 3

The position:absolute CSS method

Difficulty Level: 4/5

UPDATE: If you would like a Divi Library download (plug-and-play) for this method, jump over to Divi Soup where Michelle has put one together. Her work helped inspire this tutorial. Thanks Michelle. 🙂

Pin It on Pinterest

Want Free Divi Resources?

Subscribe to receive a free Child Theme, Layout Pack or Plugin in your inbox. Once a month. Every month.

Welcome. :). Check your inbox for your first Divi Freebie.