3 Ways to Vertically Align Buttons in Divi
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. 🙂
You videos #2 and #3 are reversed.
We just spotted that. :). Should be in the right order now. Thanks.
Great tutorial.
What I was wandering about today, when I played with it version 3:
If I wanna achieve a button, that is not full width of the container. Would be good practice to give it a width in % and position it from left by calculating (100-width)/2 to center the button
So basically like that:
width: 70%;
left: 15%;
Or am I overseeing some compatibility issues that might be the case?
Well, after writing that I realized, that it is not necessary to define a width, i should rather give left and right 15% each and be done with it… Sorry 🙂
BRILLIANT! Would not have occurred to me what you did in Method 1. Great job!!
Great tut Rob and the videos really help.
It’s a pity that Divi doesn’t have a built-in method and a pity that the Visual Builder doesn’t render method 3 correctly.
BTW – good to see that you are using the Visual Builder.
At the moment I’m only using Divi 3.0 on a local install.
Hi Rob,
I’m trying to get method 3 to work, but when I apply the CSS the button stretches out to the entire width of the row, as opposed to the width of the ’tile’ (inline with the blurb module above). I think I’ve layed out my page the same as you, except I have 1/4 1/4 1/4 1/4 structure, with four blurbs and four button modules directly underneath.
Any help would be appreciated!
Thanks!
Hi Tim. Yes method 3 can be a little tricky and is somewhat subject to other plugins that could be applying CSS to your page. Without being able to see your code, the first thing I’d try is applying position: relative; to the parent element. Which in this case would be the individual columns.