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.
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.
|
<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.
<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.
<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.
<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.
/*
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; }
}