Tachyons

Docs

/

Typography

/

Vertical Align

Version
<%= moduleVersion %>
Filesize
<%= moduleSize %>
Declarations
<%= moduleObj.declarations.total %>
Selectors
<%= moduleObj.selectors.total %>
Max. Specificity Score
<%= moduleObj.selectors.specificity.max %>
Size of Avg. Rule
<%= moduleObj.rules.size.average %>

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

<%= srcCSS  %>

<%= navDocs %>
<%= siteFooter %>