Prev Next

CSS Text Alignment

Text alignment determines how text is positioned horizontally within its container. Common values include left, right, center, and justify. Proper alignment enhances readability and improves the aesthetic appeal of your content layout.

Key Topics

Alignment Values

text-align: left; (default), text-align: center;, text-align: right;, or text-align: justify;. Centered and justified text can add balance, while left and right alignments suit languages with specific reading directions.

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Text Alignment Example</title>
    <style>
        h1 {
            text-align: center;
            font-family: Arial, sans-serif;
        }
        p {
            text-align: justify;
            max-width: 600px;
            margin: auto;
        }
    </style>
</head>
<body>
    <h1>Centered Heading</h1>
    <p>This paragraph is justified, meaning its lines stretch from the left margin to the right margin, creating a clean, block-like appearance. Justified text is commonly used in newspapers and magazines.</p>
</body>
</html>

Explanation: Centering headings can make them stand out, while justified text creates neat text blocks. Choose the alignment that best suits your content and design.

Choosing the Right Alignment

For most body text, left alignment is standard. Centered or justified text may suit headings or certain designs, but use them sparingly for readability.

Key Takeaways

  • Readability: Choose alignments that improve, not hinder, reading.
  • Style: Headings and titles may benefit from center alignment.
  • Justify Carefully: While clean-looking, justified text can create uneven spacing issues.
Prev Next