v-center: inline-block method

Vertically center descendent elements with the inline-block method.

use-name

scut-vcenter-ib

type

mixin, with default-values placeholder

arguments

$inner

default

".scut-inner"

A CSS selector for the inner element. Can be a single selector or a comma-separated list of selectors. In either case, wrap selectors in quotes.

This method requires a container and an inner element. The mixin applies to the container; the to-be-centered inner element is passed (by its selector) as an argument.

Any to-be-centered element should be an immediate child of the container (container > inner).

A word of caution: Because inline-block results in some tricky word-like spacing, this method doesn't always work well if you require exact widths (or if your inner element has a 100% width). If you require exactitude and nothing stands in the way of giving your container display: table, try vertically centering via table display.

example

HTML

<div class="eg-vcenter-ib eg-vcenter-ib-1">  <span class="scut-inner">
    Using the default classname "scut-inner".
  </span>
</div>
<div class="eg-vcenter-ib eg-vcenter-ib-2">
  <div class="eg-vcenter-ib-inner">
    Using a special classname.
  </div>
</div>
<p>And illustrating the use of a list of distinct selectors ...</p>
<div class="eg-vcenter-ib eg-vcenter-ib-3">
  <div class="special-selector-1">first</div>
  <div class="special-selector-2">second</div>
  <div class="special-selector-3">third</div>
</div>

SCSS

.eg-vcenter-ib > p {
  max-width: 90%;
}
.eg-vcenter-ib-1 {
  @include scut-vcenter-ib;
  // or @extend %scut-vcenter-ib;
  }
.eg-vcenter-ib-2 {
  @include scut-vcenter-ib(".eg-vcenter-ib-inner");
}
// illustrating a list of selectors
.eg-vcenter-ib-3 {
  @include scut-vcenter-ib(".special-selector-1", ".special-selector-2", ".special-selector-3");
}

compiled CSS

.eg-vcenter-ib > p {
  max-width: 90%;
}

.eg-vcenter-ib-1:before {
  content: "";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  margin-right: -0.25em;
}
.eg-vcenter-ib-1 > .scut-inner {
  display: inline-block;
  vertical-align: middle;
}

.eg-vcenter-ib-2:before {
  content: "";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  margin-right: -0.25em;
}
.eg-vcenter-ib-2 > .eg-vcenter-ib-inner {
  display: inline-block;
  vertical-align: middle;
}

.eg-vcenter-ib-3:before {
  content: "";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  margin-right: -0.25em;
}
.eg-vcenter-ib-3 > .special-selector-1 {
  display: inline-block;
  vertical-align: middle;
}
.eg-vcenter-ib-3 > .special-selector-2 {
  display: inline-block;
  vertical-align: middle;
}
.eg-vcenter-ib-3 > .special-selector-3 {
  display: inline-block;
  vertical-align: middle;
}

Result

Using the default classname "scut-inner".

Using a special classname.

And illustrating the use of a list of distinct selectors ...

first

second

third