Quick CSS Fix to Misaligned Buttons: Aligning Buttons in a div

If you’ve got buttons that look uneven, differing heights and a bit messy, like this:

But you want them to all be perfectly aligned, like this:

Here’s the quick CSS fix.

  1. For the div or container which is holding the buttons, add to it’s css
.button-container {  position: relative }

2. For your button CSS, add the following

.button {
display: inline-block;
position: absolute; bottom: 0; left: 0; right: 0; margin: auto;
}

Ta-da! A quick CSS fix which initially took me more time to google and fix that I’d like to admit.

All part of the learning curve.