Most (if not all) CSS frameworks use vertical padding to vertically center content within buttons. One of the challenges with this approach is maintaining a consistent button height while allowing for variable button content height.
For instance, if I have a save button with a font awesome save icon in it, the button height would change if I were to change the icon size to be larger than the font size.
I’m building a design system where the heights of inputs, buttons, and avatars will be consistent even if there are changes to the fonts or icons on the site.
Using a combination of the height property and vertical align:middle, I have achieved a solution that appears to work for my use case. Here’s the codepen: http://codepen.io/anon/pen/MwKjVo and here are some browser shots: https://www.browserstack.com/screenshots/85da170d67443f14b4a5975916836f1c41efc9d9.
This appears to be a perfect solution to my problem but I’m wondering why no frameworks or large sites (that I could find) have used this approach.
Are there potential problems with this? Are there more elegant solutions? I originally was setting the line-height to be the same as the button height but I read that the support for this is problematic in Firefox.
