Typography
Vertical Align
Utilities for sets the vertical alignment of an inline or table-cell box.
Class
class | css |
---|---|
align-baseline | vertical-align: baseline |
align-top | vertical-align: top |
align-middle | vertical-align: middle |
align-bottom | vertical-align: bottom |
align-text-top | vertical-align: text-top |
align-text-bottom | vertical-align: text-bottom |
Usage
Set element vertical alignment to top
.
<!-- Example -->
<y>
...
<img class="align-top ... inline-block"
src="...">
...
</y>
<y>
...
<y class="align-top ... inline-block">
...
</y>
...
</y>
Set element vertical alignment to bottom
.
<!-- Example -->
<y>
...
<img class="align-bottom ... inline-block"
src="...">
...
</y>
<y>
...
<y class="align-bottom ... inline-block">
...
</y>
...
</y>
Set element vertical alignment to baseline
.
<!-- Example -->
<y>
...
<img class="align-baseline ... inline-block"
src="...">
...
</y>
<y>
...
<y class="align-baseline ... inline-block">
...
</y>
...
</y>
Set element vertical alignment to middle
.
<!-- Example -->
<y>
...
<img class="align-middle ... inline-block"
src="...">
...
</y>
<y>
...
<y class="align-middle ... inline-block">
...
</y>
...
</y>
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | Yes |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |