Vertical Align

Sets vertical alignment of an inline, inline-block or table-cell box.

Classes

Examples

<div class="card">
    <div class="flex flex-wrap align-items-center justify-content-center card-container">
        <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">top</span>
            <span class="vertical-align-middle">middle</span>
            <span class="vertical-align-top">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>
</div>

Responsive

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.

• 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="card">
    <div class="flex flex-wrap align-items-center justify-content-center card-container">
        <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>
</div>