CSS Align

The CSS align property is used to align items within a container. It is commonly applied in flexbox and grid layouts to position items along the main and cross axes. Proper use of the align property enhances the layout and visual appeal of a web page.

Using Align in Flexbox

In a flexbox container, alignment is controlled using the align-items and align-self properties.

Syntax for Flexbox Alignment

The syntax for the align-items and align-self properties is as follows:


/* Align Items Syntax */
.container {
    display: flex;
    align-items: ;
}

/* Align Self Syntax */
.item {
    align-self: ;
}

Flexbox Alignment Examples

Example 1: Align Items Center


/* Align Items Center */
.container-center {
    display: flex;
    align-items: center;
}

Example 2: Align Items Flex-End


/* Align Items Flex-End */
.container-end {
    display: flex;
    align-items: flex-end;
}

Example 3: Align Self Stretch


/* Align Self Stretch */
.item-stretch {
    align-self: stretch;
}

Using Align in Grid Layout

In a grid container, alignment is controlled using the align-items and align-content properties.

Syntax for Grid Alignment

The syntax for the align-items and align-content properties is as follows:


/* Align Items Syntax */
.container-grid {
    display: grid;
    align-items: ;
}

/* Align Content Syntax */
.container-grid {
    display: grid;
    align-content: ;
}

Grid Alignment Examples

Example 1: Align Items Center


/* Align Items Center in Grid */
.container-grid-center {
    display: grid;
    align-items: center;
}

Example 2: Align Content Space-Between


/* Align Content Space-Between in Grid */
.container-grid-space {
    display: grid;
    align-content: space-between;
}