CSS property: align MCQs Quiz | Class 10

Welcome to the Class X Computer Applications (Code 165) quiz for Unit 2: HTML. This quiz focuses on the crucial CSS property: align and its concepts related to text alignment. Test your knowledge on how to control the horizontal positioning of text within elements. Complete the 10 multiple-choice questions, submit your answers, and then download a detailed PDF of your performance for review.

Understanding CSS Text Alignment

The text-align CSS property is fundamental for controlling the horizontal alignment of inline-level content (like text, images, and inline-block elements) within a block-level parent element. It dictates how text is positioned relative to the left and right edges of its containing box. Mastering this property is crucial for creating well-structured and aesthetically pleasing web pages.

Key Concepts of Text Alignment

  • Horizontal Alignment Only: It’s important to remember that text-align exclusively handles horizontal positioning. For vertical alignment, other properties like vertical-align (for inline elements) or flexbox/grid alignment properties (like align-items, align-content) are used.
  • Applies to Inline Content: This property affects how text and other inline-level children (including images, spans, etc.) are aligned within their parent block. It does not directly affect the alignment of block-level child elements themselves (e.g., it won’t center a child div).
  • Inheritance: text-align is an inherited property, meaning if you set it on a parent element (like the body or a div), its child elements will inherit that alignment unless overridden.

Common text-align Values

Here’s a breakdown of the most frequently used values for the text-align property:

Value Description Example Usage
left Aligns text to the left edge of the line box. This is the default for most block elements in left-to-right (LTR) languages. p { text-align: left; }
right Aligns text to the right edge of the line box. h2 { text-align: right; }
center Centers text within the line box. div { text-align: center; }
justify Distributes text evenly along the line, so that each line fills the full width of the block. This is often used for paragraph text in articles or newspapers. The last line is typically aligned to the left (or start). article p { text-align: justify; }
start Aligns content to the start edge of the line box. This corresponds to left in LTR languages and right in RTL languages. div { text-align: start; }
end Aligns content to the end edge of the line box. This corresponds to right in LTR languages and left in RTL languages. span { text-align: end; }

Quick Revision Points

  • text-align controls horizontal text flow.
  • left, right, center, justify are the most common values.
  • justify is ideal for newspaper-like paragraph layouts.
  • It does NOT center block-level elements; use margin: 0 auto; for that.
  • It does NOT vertically align content; use vertical-align for inline elements or flexbox/grid for block containers.
  • The default value is usually left in English (LTR).

Practice Questions

  1. Which CSS property would you use to move a block of text entirely to the right edge of its parent container?
    a) float: right;
    b) text-align: right;
    c) margin-left: auto;
    d) align-items: flex-end;
    Answer: b) text-align: right;
  2. What happens if you apply text-align: center; to a div that contains another div (a block-level element)?
    a) Both divs will be centered.
    b) Only the text inside the inner div will be centered.
    c) The inner div itself will be centered.
    d) Only inline content inside the outer div will be centered.
    Answer: d) Only inline content inside the outer div will be centered.
  3. The text-align property influences the alignment of what type of content within an element?
    a) Block-level elements
    b) Inline and inline-block level content
    c) Flex items
    d) Grid items
    Answer: b) Inline and inline-block level content
  4. Which of the following is NOT a valid value for the text-align CSS property?
    a) start
    b) end
    c) middle
    d) justify
    Answer: c) middle
  5. If you have a paragraph of text that you want to fill the entire width of its container, what is the best text-align value to achieve this, distributing extra space between words?
    a) center
    b) right
    c) justify
    d) left
    Answer: c) justify

Author

  • CBSE Quiz Editorial Team

    Content created and reviewed by the CBSE Quiz Editorial Team based on the latest NCERT textbooks and CBSE syllabus. Our goal is to help students practice concepts clearly, confidently, and exam-ready through well-structured MCQs and revision content.