Text alignment in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding text alignment behavior

What will be the horizontal alignment of the text inside this <div> if the CSS rule text-align: justify; is applied?

CSS

<div style="width: 300px; border: 1px solid black; text-align: justify;">This is a sample paragraph to test text alignment behavior.</div>

A Text lines will be stretched so that both left and right edges align with the container edges, except the last line.

B Text will be centered horizontally in the container.

C Text will be aligned only to the left edge of the container.

D Text will be aligned only to the right edge of the container.

💡 Hint

Justify alignment spreads text evenly across the line width.

The text-align: justify; style makes the text stretch so that each line (except the last) touches both left and right edges of the container, creating a clean block look.

📝 Syntax

intermediate

Correct CSS property for right text alignment

Which CSS rule correctly aligns text to the right inside a paragraph?

CSS

<p>Align me right</p>

A p { align-text: right; }

B p { text-align: right; }

C p { text-position: right; }

D p { horizontal-align: right; }

💡 Hint

The correct CSS property starts with 'text-align'.

The valid CSS property to align text horizontally is text-align. Other options are invalid CSS properties and will not work.

❓ rendering

advanced

Visual result of mixed text alignment

Given the following HTML and CSS, what will the text alignment be for the <span> inside the <div>?

CSS

<style>
  div { text-align: center; }
  span { text-align: left; display: inline-block; width: 100%; }
</style>
<div>This is a <span>test</span> text.</div>

A The &lt;span&gt; text alignment will be ignored and inherit the &lt;div&gt; alignment.

B The &lt;span&gt; text will be centered along with the &lt;div&gt; text.

C The &lt;span&gt; text will be aligned to the right inside the &lt;div&gt;.

D The &lt;span&gt; text will be aligned to the left inside the centered &lt;div&gt;.

💡 Hint

Inline-block elements can have their own text alignment.

The <div> centers its text, but the <span> is inline-block with 100% width and text-align left, so its text aligns left inside the centered container.

❓ selector

advanced

CSS selector specificity for text alignment

Which CSS rule will override the others to align text to the right for all paragraphs inside a section with class 'content'?

A p { text-align: right !important; }

B section.content p { text-align: right; }

C .content p { text-align: right; }

D #main .content p { text-align: right; }

💡 Hint

The !important rule overrides normal specificity.

The !important declaration forces the style to apply regardless of selector specificity, so option A will override all others.

❓ accessibility

expert

Ensuring accessible text alignment for screen readers

Which practice helps maintain accessibility when using CSS text alignment for paragraphs?

A Avoid using text alignment and rely only on HTML tags like &lt;center&gt; for alignment.

B Use text alignment to reorder text content visually for better screen reader reading order.

C Use text alignment purely for visual layout and ensure semantic HTML structure remains unchanged.

D Use CSS to hide text and replace it with aligned images for better visual effect.

💡 Hint

Screen readers read content in source order, not visual alignment.

Text alignment affects only visual layout. To keep content accessible, do not change the reading order or hide text. Semantic HTML and proper structure are key.