Vertical Align

Use vertical align to set typography just right. Vertical align works on inline-level elements (display inline and inline-block) and on table cells.

This documents how vertical align affects text elements. If you’d like to see how to vertically align elements - checkout the layout documentation.

Examples

Table Alignment

You can use vertical alignment classes on either td elements or on elements with a class of dtc that are direct children of an element with a class of dt.

.v-mid Align text to the middle.
.v-top Align text to the top.
.v-btm Align text to the bottom.

Inline-block Alignment

Align to the top

<p class="dib v-top">Content</p> <p class="dib v-top">Content</p> <p class="dib v-top">Content</p>

You can say, “I love you,” in Helvetica. And you can say it with Helvetica Extra Light if you want to be really fancy. Or you can say it with the Extra Bold if it’s really intensive and passionate, you know, and it might work.

You can say, “I love you,” in Helvetica. And you can say it with Helvetica Extra Light…

if you want to be really fancy. Or you can say it with the Extra Bold if it’s really intensive and passionate, you know, and it might work.

Mix and match

<p class="dib v-top">Content</p> <p class="dib v-btm">Content</p> <p class="dib v-top">Content</p>

You can say, “I love you,” in Helvetica. And you can say it with Helvetica Extra Light if you want to be really fancy. Or you can say it with the Extra Bold if it’s really intensive and passionate, you know, and it might work.

You can say, “I love you,” in Helvetica. And you can say it with Helvetica Extra Light…

if you want to be really fancy. Or you can say it with the Extra Bold if it’s really intensive and passionate, you know, and it might work.

Align to the middle

<p class="dib v-mid">Content</p> <p class="dib v-mid">Content</p> <p class="dib v-mid">Content</p>

You can say, “I love you,” in Helvetica. And you can say it with Helvetica Extra Light if you want to be really fancy. Or you can say it with the Extra Bold if it’s really intensive and passionate, you know, and it might work.

You can say, “I love you,” in Helvetica. And you can say it with Helvetica Extra Light…

if you want to be really fancy.

Align to the bottom

<p class="dib v-btm">Content</p> <p class="dib v-btm">Content</p> <p class="dib v-btm">Content</p>

You can say, “I love you,” in Helvetica. And you can say it with Helvetica Extra Light if you want to be really fancy. Or you can say it with the Extra Bold if it’s really intensive and passionate, you know, and it might work.

You can say, “I love you,” in Helvetica. And you can say it with Helvetica Extra Light…

if you want to be really fancy.

Previous

Font Style

Next

Text Align

tachyons-vertical-align

v4.0.6 174 B
Declarations
16
Selectors
16
Max. Specificity Score
10
Size of Avg. Rule
1
src/_vertical-align.css

/*

   VERTICAL ALIGN

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/

.v-base     { vertical-align: baseline; }
.v-mid      { vertical-align: middle; }
.v-top      { vertical-align: top; }
.v-btm      { vertical-align: bottom; }

@media (--breakpoint-not-small) {
  .v-base-ns     { vertical-align: baseline; }
  .v-mid-ns      { vertical-align: middle; }
  .v-top-ns      { vertical-align: top; }
  .v-btm-ns      { vertical-align: bottom; }
}

@media (--breakpoint-medium) {
  .v-base-m     { vertical-align: baseline; }
  .v-mid-m      { vertical-align: middle; }
  .v-top-m      { vertical-align: top; }
  .v-btm-m      { vertical-align: bottom; }
}

@media (--breakpoint-large) {
  .v-base-l     { vertical-align: baseline; }
  .v-mid-l      { vertical-align: middle; }
  .v-top-l      { vertical-align: top; }
  .v-btm-l      { vertical-align: bottom; }
}