CSS Align

In CSS, the align property is used to align elements within their containing element. There are several properties that can be used for aligning elements in CSS:

text-align: 

This property is used to align text content horizontally within its containing element. It can take the following values:

• left: This value aligns the text to the left edge of the containing element.
• right: This value aligns the text to the right edge of the containing element.
• center: This value aligns the text to the center of the containing element.
• justify: This value stretches the lines of the text to fill the width of the containing element.
   

vertical-align: 

This property is used to align elements vertically within their containing element. It can take the following values:

• top: This value aligns the element to the top of the containing element.
• middle: This value aligns the element to the middle of the containing element.
• bottom: This value aligns the element to the bottom of the containing element.
   

align-items: 

This property is used to align the items within a flex container along the cross axis. It can take the following values:

• flex-start: This value aligns the items to the start of the cross axis.
• center: This value aligns the items to the center of the cross axis.
• flex-end: This value aligns the items to the end of the cross axis.
• stretch: This value stretches the items to fill the cross axis.
   

justify-content: 

This property is used to align the items within a flex container along the main axis. It can take the following values:

• flex-start: This value aligns the items to the start of the main axis.
• center: This value aligns the items to the center of the main axis.
• flex-end: This value aligns the items to the end of the main axis.
• space-between: This value evenly spaces the items along the main axis, with the first item at the start and the last item at the end.
• space-around: This value evenly spaces the items along the main axis, with equal space before the first item and after the last item.

margin: 

This property is used to horizontally align block-level elements within their containing element. By setting the left and right margins to auto, the element will be centered horizontally within its container.

Example:

div {
 margin: 0 auto;
}

In this example, the margin property is used to center the div element horizontally within its containing element.

Here is an example that demonstrates the use of text-align:

div {
 text-align: center;
}

In this example, we have a div element with its text content centered within its containing element.

And here is an example that demonstrates the use of align-items and justify-content:

.container {
 display: flex;
 align-items: center;
 justify-content: space-between;
}

In this example, we have a flex container with its items aligned to the center along the cross axis, and spaced evenly along the main axis with equal space before the first item and after the last item.