CSS Align

1 April 2025 | Category: CSS

CSS provides multiple ways to align elements horizontally and vertically. These include text alignment, flexbox, grid alignment, and positioning techniques. Let’s explore all alignment methods step by step.

Text Alignment (`text-align`)

The text-align property is used to align text inside a block element like <p>, <div>, <h1>, etc.

Values of `text-align`

Value	Description
`left`	Aligns text to the left (default for LTR languages).
`right`	Aligns text to the right.
`center`	Centers text.
`justify`	Spreads text evenly across the width of the element.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .left { text-align: left; }
        .center { text-align: center; }
        .right { text-align: right; }
        .justify { text-align: justify; }
    </style>
</head>
<body>
    <p class="left">This is left-aligned text.</p>
    <p class="center">This is center-aligned text.</p>
    <p class="right">This is right-aligned text.</p>
    <p class="justify">This is justified text, which spreads evenly across the width of the paragraph.</p>
</body>
</html>

Horizontal Alignment using `margin: auto`

To center block elements horizontally, use margin: auto; with a fixed width.

Example: Centering a `div`

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
            width: 300px;
            background: lightblue;
            padding: 20px;
            margin: 20px auto; /* Centers horizontally */
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">I am centered!</div>
</body>
</html>

Important: margin: auto; only works on block elements with a defined width.

Aligning with Flexbox

The best way to align elements both horizontally and vertically is by using Flexbox.

3.1 Centering a Single Element (`display: flex;`)

To center an element inside a container:

Use display: flex;
Use justify-content: center; for horizontal alignment.
Use align-items: center; for vertical alignment.

Example: Centering a `div` in a Container

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: lightgray;
        }
        .box {
            background: coral;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Centered Box</div>
    </div>
</body>
</html>

3.2 Aligning Multiple Elements (`justify-content` & `align-items`)

Flexbox allows multiple items inside a flex container to be aligned easily.

Flexbox Alignment Properties

Property	Effect
`justify-content: flex-start;`	Aligns items to the left.
`justify-content: flex-end;`	Aligns items to the right.
`justify-content: center;`	Centers items horizontally.
`justify-content: space-between;`	Distributes items evenly with space between.
`justify-content: space-around;`	Adds equal space around items.
`align-items: flex-start;`	Aligns items to the top.
`align-items: flex-end;`	Aligns items to the bottom.
`align-items: center;`	Centers items vertically.

Example: Aligning Multiple Items

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100vh;
            background: lightgray;
        }
        .box {
            width: 100px;
            height: 100px;
            background: coral;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</body>
</html>

Grid Alignment

CSS Grid Layout provides powerful alignment options using align-items, justify-items, align-self, and justify-self.

Example: Centering with Grid

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            display: grid;
            place-items: center;
            height: 100vh;
            background: lightgray;
        }
        .box {
            background: coral;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">I am centered!</div>
    </div>
</body>
</html>

place-items: center; is shorthand for align-items: center; justify-items: center;.

Vertical Alignment with `position`

If you are not using Flexbox or Grid, you can vertically align elements using absolute positioning.

Example: Centering an Element using `position: absolute;`

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            position: relative;
            height: 100vh;
            background: lightgray;
        }
        .box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: coral;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Centered Box</div>
    </div>
</body>
</html>

The transform: translate(-50%, -50%) moves the element back by 50% of its own width & height.

Aligning Images

To align an image inside a container:

Use text-align: center; for inline images.
Use margin: auto; for block images.
Use vertical-align: middle; for inline elements inside a table or line.

Example: Centering an Image

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            text-align: center;
        }
        img {
            width: 200px;
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="https://via.placeholder.com/200" alt="Centered Image">
    </div>
</body>
</html>

Summary

Method	Best for	Properties Used
`text-align`	Text alignment	`text-align: left/right/center/justify;`
`margin: auto`	Centering block elements	`margin: auto;` (Needs width)
`display: flex;`	Centering items	`justify-content; align-items;`
`display: grid;`	Grid-based alignment	`place-items: center;`
`position: absolute;`	Precise alignment	`top, left, transform: translate();`

CSS Align

Text Alignment (text-align)

Values of text-align