# Vertical Align Change the alignment of elements with the vertical-align utilities. Only affects inline, inline-block, inline-table, and table cell elements. **Category:** Utilities **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-vertical-align--introduction ## Variants documented in Storybook - VerticalAlignShowcase: https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-vertical-align--verticalalignshowcase ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Vertical Align. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html

Utilities

Vertical Align Utilities Reference

A complete reference of all vertical alignment utility classes.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Vertical Align

Format: ux4g-va-{alignment}

Baseline ux4g-va-baseline

Top ux4g-va-top

Middle ux4g-va-middle

Bottom ux4g-va-bottom

Text Top ux4g-va-text-top

Text Bottom ux4g-va-text-bottom

``` React: ```jsx import React from 'react'; const VerticalAlignExample1Demo = () => ( <>

Utilities

Vertical Align Utilities Reference

A complete reference of all vertical alignment utility classes.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

{/* Vertical Align */}

Vertical Align

Format: ux4g-va-{alignment}

Baseline ux4g-va-baseline

Top ux4g-va-top

Middle ux4g-va-middle

Bottom ux4g-va-bottom

Text Top ux4g-va-text-top

Text Bottom ux4g-va-text-bottom

); export default VerticalAlignExample1Demo; ``` Angular: ```html

Utilities

Vertical Align Utilities Reference

A complete reference of all vertical alignment utility classes.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Vertical Align

Format: ux4g-va-{alignment}

Baseline ux4g-va-baseline

Top ux4g-va-top

Middle ux4g-va-middle

Bottom ux4g-va-bottom

Text Top ux4g-va-text-top

Text Bottom ux4g-va-text-bottom

``` ### 2. Vertical Align Showcase — Vertical Align HTML: ```html

Vertical Align Baseline Vertical Align Top Vertical Align Middle Vertical Align Bottom Vertical Align Text Top Vertical Align Text Bottom

``` React: ```jsx import React from 'react'; const VerticalAlignExample2Demo = () => ( <>

Vertical Align Baseline Vertical Align Top Vertical Align Middle Vertical Align Bottom Vertical Align Text Top Vertical Align Text Bottom

); export default VerticalAlignExample2Demo; ``` Angular: ```html

Vertical Align Baseline Vertical Align Top Vertical Align Middle Vertical Align Bottom Vertical Align Text Top Vertical Align Text Bottom

``` ## CSS class reference The following CSS partials define the Vertical Align utility classes used in the examples above: ### vertical-align.utilities.css ```css /* Vertical Align Utilities */ .ux4g-va-baseline { vertical-align: var(--ux4g-va-baseline); } .ux4g-va-top { vertical-align: var(--ux4g-va-top); } .ux4g-va-middle { vertical-align: var(--ux4g-va-middle); } .ux4g-va-bottom { vertical-align: var(--ux4g-va-bottom); } .ux4g-va-text-top { vertical-align: var(--ux4g-va-text-top); } .ux4g-va-text-bottom { vertical-align: var(--ux4g-va-text-bottom); } ``` ## Accessibility notes - Use the classes/tokens exactly as documented. Changing token values without a design review can break accessibility. - Ensure color contrast meets WCAG 2.1 AA. - Test responsive and RTL behavior where utility classes rely on logical properties.