HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS text-align Article Pattern Example</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      padding: 20px;
      background: #f1f5f9;
    }

    .article-title {
      text-align: center;
      color: #1e293b;
    }

    .article-body {
      text-align: left;
      max-width: 42rem;
      margin: 0 auto;
      line-height: 1.65;
      color: #334155;
    }
  </style>
</head>
<body>
  <h1 class="article-title">Learning CSS text-align</h1>
  <p class="article-body">The heading above is centered for visual emphasis. This paragraph uses left alignment because long blocks of centered text are harder to read. Combining both patterns is common in blogs, docs, and landing pages.</p>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS text-align Property - Centered Heading Pattern