v-center: line-height method

view source

Vertically center text (or other inline elements) by equalizing an element's height and line-height.

mixin only
  1. $height

This method is simple, requires none of the extra <div>'s that make us all second-guess ourselves, and works in many common vertical-centering-situations.

However, it is also limited. Below I'll list some caveats — and if any of them mean this mixin doesn't fit your situation, try one of the other vertical-centering methods in Scut (via inline-block, via table display, and via transform).

  • This method only works for inline content (usually text) that will not exceed a single line. So it's good for buttons and headings with backgrounds and things like that.
  • The line-height set by this method will cascade into inner elements, so you have to make sure to override it as needed.
  • If your element has a border and box-sizing: border-box this method will be a little off, because the line-height will start beneath the top border but the height will include the top border. To avoid this issue, you can either set box-sizing: content-box or use a different vertical-centering method.



.eg-vcenter-lh-1 {
  @include scut-vcenter-lh(50px);
.eg-vcenter-lh-2 {
  @include scut-vcenter-lh(50px);
  font-size: 0.7em;