[CSS] Basics of Centering Text

This tutorial explains how to center text using the text-align: center; property in CSS.

🔹 Partial Code

<div class="text-center">
  The text will be centered.
</div>

<style>
.text-center {
  text-align: center;
}
</style>

💻 Full Working Code (This code alone works as a complete HTML)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Center Text</title>
  <style>
    .text-center {
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="text-center">
    The text will be centered.
  </div>
</body>
</html>

🧩 Practical Usage Tips

text-align: center; is one of the most basic CSS properties used to align text to the center. It also affects inline elements like images and buttons, making it a simple yet powerful tool for alignment.

📱 Responsive Design Considerations

It keeps text centered regardless of screen size, making it effective for mobile-friendly designs such as callouts or headings. However, to center block-level elements themselves, you should use margin: 0 auto; as well.

While centering draws users' attention, overusing it may reduce readability. Use it appropriately depending on the context.

🎯 Practical Techniques for Center Alignment

text-align: center; is a simple yet versatile property. It can be applied not only to inline elements but also to elements with display: inline-block;, making it useful for centering items like navigation menu entries across various use cases.

📊 Centering Multi-line Text

To center an entire paragraph, simply wrap it with <p class="text-center">. However, for long texts, consider adding a maximum width (e.g., max-width: 600px;) to improve readability and visual appearance.

🖼️ Mixed Layouts of Images and Text

To center an image and its caption, wrap them in <figure class="text-center">. Since images are block elements, use margin: 0 auto; alongside. For <figcaption>, which is an inline element, text-align: center; alone is sufficient for centering.

Note that center alignment draws attention, so overusing it may actually reduce the impact of truly important content. Use it selectively for headings or notable notes. For form labels, left alignment is generally more user-friendly and easier to read.

In responsive design, it’s also effective to revert to left alignment on smaller screens using media queries, such as @media (max-width: 768px) { .text-center { text-align: left; } }. Choosing the optimal alignment based on context is key.

Copied!