CSS Alignment

CSS provides several properties for aligning elements. You can align text, images, divs, buttons, and other components both horizontally and vertically.

Common Alignment Methods

• text-align
• margin: auto
• vertical-align
• Flexbox
• Grid

.container{

    text-align:center;

}

The text-align property is used to align inline content such as text and inline elements.

h1{

    text-align:center;

}

p{

    text-align:justify;

}

To horizontally center a block-level element, specify a width and use margin: auto;.

.box{

    width:300px;

    margin:auto;

}

.card{

    width:400px;

    margin:auto;

}

The vertical-align property aligns inline, inline-block, and table-cell elements vertically.

img{

    vertical-align:middle;

}

Flexbox provides one of the easiest ways to align items horizontally and vertically.

.container{

    display:flex;

    justify-content:center;

    align-items:center;

    height:300px;

}

.container{

    display:flex;

    justify-content:center;

    align-items:center;

}

CSS Grid provides another powerful way to align elements. Using place-items, justify-items, and align-items, you can easily position content inside a grid container.

.container{

    display:grid;

    place-items:center;

    height:300px;

}

Flexbox makes it very easy to center an element both horizontally and vertically.

.container{

    display:flex;

    justify-content:center;

    align-items:center;

    height:100vh;

}

Images can be aligned using different CSS techniques, depending on your layout requirements.

img{

    display:block;

    margin:auto;

}

.image-box{

    text-align:center;

}

Example 1: Center a Button

.button-box{

    text-align:center;

}

Example 2: Center a Card

.card{

    width:350px;

    margin:auto;

}

Example 3: Center Content

.container{

    display:flex;

    justify-content:center;

    align-items:center;

}

.container{

    display:flex;

    justify-content:center;

    align-items:center;

}

Following proper alignment techniques makes webpages clean, responsive, and easy to read.

• Use text-align for aligning text.
• Use margin:auto; to center block elements.
• Use Flexbox for horizontal and vertical centering.
• Use CSS Grid for complex layouts.
• Keep spacing consistent throughout the webpage.
• Avoid mixing multiple alignment techniques unnecessarily.
• Test alignment on different screen sizes.
• Write clean and readable CSS code.

❌ Incorrect

.box{

    justify-content:center;

}

✔ Correct

.box{

    display:flex;

    justify-content:center;

}

CSS alignment properties such as text-align, margin:auto, Flexbox, and Grid are supported by all modern browsers.

1. What is CSS alignment?
2. What is the purpose of text-align?
3. How do you center a block element?
4. When should you use margin:auto?
5. What is the difference between Flexbox and Grid?
6. Which property centers items horizontally in Flexbox?
7. Which property centers items vertically in Flexbox?
8. What does vertical-align do?
9. Can vertical-align be used on block elements?
10. Which alignment method is recommended for modern websites?

In this lesson, you learned:

• ✔ Introduction to CSS Alignment.
• ✔ text-align property.
• ✔ margin:auto.
• ✔ vertical-align.
• ✔ Flexbox alignment.
• ✔ CSS Grid alignment.
• ✔ Horizontal and vertical centering.
• ✔ Image alignment.
• ✔ Practical examples.
• ✔ Best practices and common mistakes.