CSS Alignment Properties

Understanding CSS alignment properties is essential for creating well-structured and visually appealing web layouts. This tutorial will cover text alignment, vertical alignment, flexbox alignment, grid alignment, and positional alignment with detailed explanations, best practices, and practical examples.

Text Alignment

Text alignment controls the horizontal alignment of text within an element.

Left Align

text-align: left; aligns the text to the left within its containing element. This is the default behavior for most elements.

Try yourself 
        
            .text-left { text-align: left; }
Center Align

text-align: center; centers the text within its containing element. This is useful for headings or any content that needs emphasis.

Try yourself 
        
            .text-center { text-align: center; }
Right Align

text-align: right; aligns the text to the right within its containing element.

Try yourself 
        
            .text-right { text-align: right; }
Justify Align

text-align: justify; spaces the text so that the left and right sides are aligned.

Try yourself 
        
            .text-justify { text-align: justify; }

Vertical Alignment

Vertical alignment controls the vertical alignment of an element within its container. This is typically used with inline or table-cell elements.

Top Align

vertical-align: top; aligns the element to the top of its containing element.

Try yourself 
        
            .align-top {
    vertical-align: top;
}
.vertical-align-container {
    display: table;
    height: 200px;
    border: 1px solid black;
}
.vertical-align-example {
    display: table-cell;
    border: 1px solid red;
    padding: 10px;
}
Middle Align

vertical-align: middle; aligns the element to the middle of its containing element.

Try yourself 
        
            .align-middle {
    vertical-align: middle;
}
.vertical-align-container {
    display: table;
    height: 200px;
    border: 1px solid black;
}
.vertical-align-example {
    display: table-cell;
    border: 1px solid red;
    padding: 10px;
}
Bottom Align

vertical-align: bottom; aligns the element to the bottom of its containing element.

Try yourself 
        
            .align-bottom {
    vertical-align: bottom;
 }
.vertical-align-container {
    display: table;
    height: 200px;
    border: 1px solid black;
}
.vertical-align-example {
    display: table-cell;
    border: 1px solid red;
    padding: 10px;
}

Note:

For vertical alignment to work correctly with table-cell elements, the parent container should have a defined height.

Flexbox Alignment

Flexbox alignment provides more advanced alignment options for flex containers and their children.

Align Items

align-items aligns flex items along the cross axis (vertical axis in a row layout).

Try yourself 
        
            .flexbox-container {
    display: flex;
    border: 1px solid black;
    margin-bottom: 10px;
    height: 200px;
}
.flex-item {
    background-color: lightgray;
    margin: 5px;
    padding: 10px;
    border: 1px solid red;
}
.align-items-start {
    align-items: flex-start;
}
.align-items-center {
    align-items: center;
}
.align-items-end {
    align-items: flex-end;
}
Align Self

align-self allows individual flex items to have different alignment than the rest of the flex container.

Try yourself 
        
            .flexbox-align-self-container {
     display: flex;
     border: 1px solid black;
     margin-bottom: 10px;
     height: 200px;
}
.flex-item {
     background-color: lightgray;
     margin: 5px;
     padding: 10px;
     border: 1px solid red;
}
.align-self-start {
     align-self: flex-start;
}
.align-self-center {
     align-self: center;
}
.align-self-end {
     align-self: flex-end;
}
Justify Content

justify-content aligns flex items along the main axis (horizontal axis in a row layout).

Try yourself 
        
            .flexbox-justify-content-container {
    display: flex;
    border: 1px solid black;
    margin-bottom: 10px;
    height: 200px;
}
.flex-item {
    background-color: lightgray;
    margin: 5px;
    padding: 10px;
    border: 1px solid red;
}
.justify-content-start {
    justify-content: flex-start;
}
.justify-content-center {
    justify-content: center;
}
.justify-content-end {
    justify-content: flex-end;
}
.justify-content-space-between {
    justify-content: space-between;
}
.justify-content-space-around {
    justify-content: space-around;
}

Grid Alignment

Grid alignment provides alignment options for grid containers and their children.

Align Items

align-items aligns grid items along the cross axis (vertical axis in a row layout).

Try yourself 
        
            .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid black;
    margin-bottom: 10px;
    height: 200px;
}
.grid-item {
    background-color: lightgray;
    margin: 5px;
    padding: 10px;
    border: 1px solid red;
}
.align-items-start {
    align-items: start;
}
.align-items-center {
    align-items: center;
}
.align-items-end {
    align-items: end;
}
Justify Items

justify-items aligns grid items along the main axis (horizontal axis in a row layout).

Try yourself 
        
            .grid-justify-items-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   border: 1px solid black;
   margin-bottom: 10px;
   height: 200px;
}
.grid-item {
   background-color: lightgray;
   margin: 5px;
   padding: 10px;
   border: 1px solid red;
}
.justify-items-start {
   justify-items: start;
}
.justify-items-center {
   justify-items: center;
}
.justify-items-end {
   justify-items: end;
}

Positional Alignment

Positional alignment uses the properties top, right, bottom, and left to position elements precisely within their containing element.

Using Positional Alignment

Positional alignment can be used to align elements in relation to their containing element or to other elements. It works when the element is positioned relatively, absolutely, or fixed.

Try yourself 
        
            // first example
.position-example {
   position: relative;
   width: 400px;
   height: 400px;
   background-color: lightblue;
   border: 1px solid black;
}
.position-example::before {
   content: "Top: 10px; Left: 0;";
   position: absolute;
   top: 10px;
   left: 0;
   background-color: #7FFFD4;
   padding: 5px;
}
.position-example::after {
   content: "Bottom: 10px; Right: 8px;";
   position: absolute;
   bottom: 10px;
   right: 8px;
   background-color: #7FFFD4;
   padding: 5px;
}

// second example
.position-example-2 {
   position: relative;
   width: 400px;
   height: 400px;
   background-color: green;
   border: 1px solid black;
}
.div1 {
   position: absolute;
   top: 0;
   right: 0;
   background-color: yellow;
   padding: 5px;
}
.div2 {
   position: absolute;
   bottom: 0;
   left: 0;
   background-color: yellow;
   padding: 5px;
}

Note:

The position property needs to be set for top, right, bottom, and left to work. It can be set to relative, absolute, or fixed.

Understanding and utilizing these alignment properties will enhance your ability to create well-structured and visually appealing web layouts.