Sets vertical alignment of an inline, inline-block or table-cell box.
| Class | Properties |
|---|---|
| vertical-align-baseline | vertical-align: baseline; |
| vertical-align-top | vertical-align: top; |
| vertical-align-middle | vertical-align: middle; |
| vertical-align-bottom | vertical-align: bottom; |
| vertical-align-text-top | vertical-align: text-top; |
| vertical-align-text-bottom | vertical-align: text-bottom; |
| vertical-align-sub | vertical-align: sub; |
| vertical-align-super | vertical-align: super; |
<div class="flex flex-wrap align-items-center justify-content-center">
<div class="surface-overlay border-round border-1 shadow-1 p-5 py-0 m-3">
<span class="vertical-align-baseline">baseline</span>
<span class="vertical-align-top">top</span>
<span class="vertical-align-middle">middle</span>
<span class="vertical-align-bottom">bottom</span>
<span class="vertical-align-text-top">text-top</span>
<span class="vertical-align-text-bottom">text-bottom</span>
<span class="vertical-align-sub">sub</span>
<span class="vertical-align-super">super</span>
</div>
</div>
Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:vertical-align-bottom to use a responsive class.
| Class | Description |
|---|---|
| sm: | small screens e.g. phones |
| md: | medium screens e.g. tablets |
| lg: | large screens e.g. notebooks |
| xl: | larger screens e.g monitors |
<div class="flex flex-wrap align-items-center justify-content-center">
<div class="surface-overlay border-round border-1 shadow-1 p-5 py-0 m-3">
<span class="vertical-align-baseline">baseline</span>
<span class="vertical-align-bottom md:vertical-align-top">top</span>
<span class="vertical-align-middle">middle</span>
<span class="vertical-align-top md:vertical-align-bottom">bottom</span>
<span class="vertical-align-text-top">text-top</span>
<span class="vertical-align-text-bottom">text-bottom</span>
<span class="vertical-align-sub">sub</span>
<span class="vertical-align-super">super</span>
</div>
</div>