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.