Skip to content

Instantly share code, notes, and snippets.

@Andy-set-studio

Andy-set-studio/_vertically-align-label.scss

Last active September 8, 2021 01:30
Show Gist options
  • Save Andy-set-studio/433b8d7fb4e1882349238d1edb5bd556 to your computer and use it in GitHub Desktop.
Save Andy-set-studio/433b8d7fb4e1882349238d1edb5bd556 to your computer and use it in GitHub Desktop.
Download ZIP
Adds a pseudo-element to help vertically align text labels in buttons/block-like links without using magic numbers https://ishadeed.com/article/button-label-alignment/
Raw
_vertically-align-label.scss
/// VERTICALLY ALIGN LABEL
/// Adds a pseudo-element to help vertically align
/// text labels in buttons/block-like links without
/// using magic numbers
/// More: https://ishadeed.com/article/button-label-alignment/
@mixin vertically-align-label() {
&::before {
content: '';
display: inline-block;
vertical-align: middle;
height: 1ex;
}
}
@Andy-set-studio
Copy link
Author

I just added ex units because using x-height for a height value feels more appropriate

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment