Tachyons

Docs

/

Typography

/

Vertical Align

Version
1.1.0
Filesize
251 B
Declarations
32
Selectors
32
Max. Specificity Score
10
Size of Avg. Rule
1

Use vertical align to set typography just right. Vertical align works on text 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

Inline Alignment

Lorem ipsum dolor sit amet, consetetur sadipscing Sub aligned text (v-sub) elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At Super aligned text (v-sup) vero eos et accusam et justo duo dolores et ea rebum.

Table Alignment

.v-mid Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Aligned to middle
.v-top Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Aligned to top
.v-btm Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Aligned to Bottom

Previous

Font Family

Next

Text Align
src/_vertical-align.css

/*

   VERTICAL ALIGN

*/

.v-base     { vertical-align: baseline; }
.v-sub      { vertical-align: sub; }
.v-sup      { vertical-align: super; }
.v-txt-top  { vertical-align: text-top; }
.v-txt-btm  { vertical-align: text-bottom; }
.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-sub-ns      { vertical-align: sub; }
  .v-sup-ns      { vertical-align: super; }
  .v-txt-top-ns  { vertical-align: text-top; }
  .v-txt-btm-ns  { vertical-align: text-bottom; }
  .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-sub-m      { vertical-align: sub; }
  .v-sup-m      { vertical-align: super; }
  .v-txt-top-m  { vertical-align: text-top; }
  .v-txt-btm-m  { vertical-align: text-bottom; }
  .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-sub-l      { vertical-align: sub; }
  .v-sup-l      { vertical-align: super; }
  .v-txt-top-l  { vertical-align: text-top; }
  .v-txt-btm-l  { vertical-align: text-bottom; }
  .v-mid-l      { vertical-align: middle; }
  .v-top-l      { vertical-align: top; }
  .v-btm-l      { vertical-align: bottom; }
}


Docs

General

Debugging Images