• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Align

← Previous Next →

🔹 What is CSS Alignment?

In CSS, alignment refers to positioning elements horizontally or vertically in a container.
There are different alignment techniques depending on whether you're aligning:

  • Text

  • Block elements

  • Inline elements

  • Flexbox/Grid items

🔸 Types of Alignment in CSS

1. Text Alignment

Use the text-align property to align inline content like text, inline images, or inline-block elements inside a block container.

text-align: left | right | center | justify;
🔹 Example:
<p class="centered-text">This paragraph is centered.</p>

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

2. Vertical Alignment (Inline Elements)

Use vertical-align to align inline or inline-block elements vertically relative to the line box.

vertical-align: baseline | top | middle | bottom | text-top | text-bottom;
🔹 Example:
<img src="icon.png" class="v-align"> Text next to icon

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

3. Aligning Block Elements (Horizontally)

To center a block element (like <div>) horizontally:

Method 1: margin: auto (with fixed width)
.center-block {
  width: 300px;
  margin: 0 auto;
}
Method 2: Using Flexbox
.parent {
  display: flex;
  justify-content: center;
}

4. Flexbox Alignment

Flexbox provides powerful alignment options:

display: flex;
justify-content: center;   /* horizontal */
align-items: center;       /* vertical */
🔹 Example:
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

5. Aligning Items in Grid

CSS Grid uses these properties:

justify-items: start | center | end;
align-items: start | center | end;

Practice Questions

Q1. Align text to the right inside a <div>.

Q2. Center a heading inside its container.

Q3. Vertically align an icon next to text.

Q4. Horizontally center a block element with fixed width.

Q5. Center text both horizontally and vertically using Flexbox.

Q6. Create three buttons spaced evenly using Flexbox.

Q7. Align a grid item to the bottom inside a grid container.

Q8. Justify a paragraph to make both edges aligned.

Q9. Use text-align to center an image inside a block.

Q10. Vertically center two inline-block elements.

CSS Align Quiz

Q1: Which property aligns text horizontally?

A. vertical-align
B. text-align
C. align-items
D. align-self

Q2: Which value of text-align centers the text?

A. left
B. center
C. right
D. justify

Q3: How do you vertically center content in a flex container?

A. text-align: center
B. align-items: center
C. float: middle
D. position: center

Q4: Which property aligns block elements horizontally?

A. margin: auto
B. display: inline
C. text-align
D. float

Q5: What is the default value of text-align?

A. left
B. center
C. right
D. justify

Q6: Which value justifies text to both sides?

A. center
B. middle
C. justify
D. stretch

Q7: Which vertical-align value places the element in the middle?

A. top
B. middle
C. bottom
D. text-bottom

Q8: What is the use of align-items in Flexbox?

A. Align text only
B. Align block only
C. Vertically align flex items
D. Add padding

Q9: Which property centers items horizontally in Flexbox?

A. align-items
B. justify-content
C. text-align
D. margin: auto

Q10: How do you align an inline element vertically with vertical-align?

A. Use text-align
B. Use vertical-align
C. Use padding
D. Use margin-top
← Previous Next →
Login
Go Back Top