CSS Align Practice Questions with Solutions

By /

Introduction

CSS provides several ways to align text, images, and HTML elements. You can align content horizontally, vertically, or center it inside a container. Proper alignment makes webpages look clean, professional, and easy to read. In this chapter, you’ll practice different CSS alignment techniques through simple solved questions that are easy for beginners to understand. CSS Align Practice questions with solutions help to build concepts.

Question 1: Center Align Text

Problem Statement

Write CSS to center-align the text inside a paragraph.

CSS Code

p {    text-align: center;}

Output

The text appears center-aligned inside the paragraph.

Explanation

  • text-align controls horizontal text alignment.
  • center places the text in the middle of its container.
  • It is commonly used for headings and page titles.

Question 2: Right Align Text

Problem Statement

Write CSS to align the text to the right side of a paragraph.

CSS Code

p {    text-align: right;}

Output

The text appears aligned to the right side of the paragraph.

Explanation

  • text-align: right; moves the text to the right.
  • It is often used for quotations and right-to-left layouts.
  • The text remains inside the container.

Question 3: Justify Paragraph Text

Problem Statement

Write CSS to make paragraph text evenly aligned on both the left and right sides.

CSS Code

p {    text-align: justify;}

Output

The paragraph stretches so that both the left and right edges appear aligned.

Explanation

  • justify adjusts the spacing between words.
  • It creates straight edges on both sides.
  • This style is commonly used in newspapers and books.

Question 4: Center a Block Element Horizontally

Problem Statement

Write CSS to center a <div> horizontally inside its parent container.

CSS Code

div {    width: 300px;    margin: auto;}

Output

The <div> appears centered horizontally within its parent.

Explanation

  • width gives the element a fixed width.
  • margin: auto; automatically distributes the left and right margins.
  • This is one of the most common methods for centering block elements.

Question 5: Center an Image Horizontally

Problem Statement

Write CSS to display an image in the center of its container.

CSS Code

img {    display: block;    margin: auto;}

Output

The image appears centered horizontally.

Explanation

  • display: block; makes the image behave like a block element.
  • margin: auto; centers the image.
  • This technique is commonly used for logos and banners.

Question 6: Center Content Using Flexbox

Problem Statement

Write CSS to horizontally center all items inside a Flexbox container.

CSS Code

.container {    display: flex;    justify-content: center;}

Output

All child elements are displayed horizontally centered inside the container.

Explanation

  • display: flex; creates a Flexbox container.
  • justify-content aligns items along the horizontal (main) axis.
  • center places all items in the middle.

Question 7: Align Items Vertically Using Flexbox

Problem Statement

Write CSS to vertically center all items inside a Flexbox container.

CSS Code

.container {    display: flex;    align-items: center;}

Output

All child elements are vertically centered inside the container.

Explanation

  • display: flex; enables Flexbox.
  • align-items aligns items along the vertical (cross) axis.
  • center places every item in the middle vertically.

Question 8: Center an Element Using Absolute Positioning

Problem Statement

Write CSS to place a <div> exactly in the center of its parent element.

CSS Code

div {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);}

Output

The <div> appears perfectly centered inside its parent element.

Explanation

  • top: 50%; moves the element halfway down.
  • left: 50%; moves it halfway across.
  • transform: translate(-50%, -50%); shifts the element back by half of its own size for perfect centering.

Question 9: Left Align Text

Problem Statement

Write CSS to align the text to the left side of a paragraph.

CSS Code

p {    text-align: left;}

Output

The text appears aligned to the left side of the paragraph.

Explanation

  • text-align: left; places the text at the left edge.
  • This is the default alignment for most left-to-right languages.
  • It provides a clean and readable layout.

Question 10: Center Content Using CSS Grid

Problem Statement

Write CSS to center all child elements inside a Grid container.

CSS Code

.container {    display: grid;    place-items: center;}

Output

All child elements appear perfectly centered inside the Grid container.

Explanation

  • display: grid; creates a CSS Grid container.
  • place-items: center; centers items both horizontally and vertically.
  • This is one of the simplest ways to center content.

Key Takeaways

  • text-align aligns text horizontally.
  • margin: auto; centers block elements horizontally.
  • display: block; with margin: auto; centers images.
  • justify-content aligns Flexbox items horizontally.
  • align-items aligns Flexbox items vertically.
  • place-items: center; centers Grid items horizontally and vertically.
  • transform: translate(-50%, -50%); is commonly used for perfect centering with absolute positioning.

Frequently Asked Questions (FAQs)

1. What is the CSS text-align property?

The text-align property controls the horizontal alignment of text inside an element.

2. How can I center a block element?

Use margin: auto; with a fixed width.

div {    width: 300px;    margin: auto;}

3. How do I center an image?

Convert the image into a block element and apply automatic margins.

img {    display: block;    margin: auto;}

4. Which Flexbox property centers items horizontally?

justify-content: center; aligns Flexbox items horizontally.

5. Which Flexbox property centers items vertically?

align-items: center; aligns Flexbox items vertically.

6. What is the easiest way to center content using CSS Grid?

Use the following CSS:

.container {    display: grid;    place-items: center;}

7. Which method is best for perfectly centering an element?

For modern layouts, CSS Grid (place-items: center) or Flexbox (justify-content and align-items) are the easiest options. For absolutely positioned elements, use top: 50%, left: 50%, and transform: translate(-50%, -50%).

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top