CSS Align - Detailed Overview

Introduction to CSS Align

The CSS align properties allow you to align elements within their containers. The most common properties include text-align for horizontal alignment and vertical-align for vertical alignment.

Text Alignment

Use text-align to align text and inline elements within a block-level container:

.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

Vertical Alignment

Use vertical-align to align inline or inline-block elements within a line box:

.align-top {
    vertical-align: top;
}

.align-middle {
    vertical-align: middle;
}

.align-bottom {
    vertical-align: bottom;
}