CSS text-align: The Property to Align Text in CSS

The CSS text-align property specifies the horizontal alignment of text within an HTML element. It’s a part of the CSS specification, governing text layout behavior across browsers.

By adjusting the horizontal alignment, you can control the layout and appearance of text on web pages.

How to Use text-align to Align Text in CSS

The text-align property syntax accepts values like left, right, center, and justify to align text.

/* Aligning text to the left */
p { text-align: left; }

/* Center-aligning headings */
h1 { text-align: center; }

/* Aligning footer text to the right */
.footer { text-align: right; }

The default value of text-align for most elements is left, except in elements inside .

Example Usage in HTML

<p>This paragraph has left-aligned text.</p>
<h1 style="text-align: center;">This heading is centered.</h1>
<footer style="text-align: right;">Footer content aligned to the right.</footer>

When to Use text-align to Align Text in CSS

Webpage Layouts

Setting the text alignment can enhance the readability and aesthetics of text in different sections of a webpage.

.nav { text-align: center; }
.article { text-align: justify; }

Responsive Design

Also, you can adapt text alignment to different screen sizes using media queries. For example, you can only center-align a header on mobile devices.

@media (max-width: 600px) {
  .header { text-align: center; }
}

Visual Impact

By centering headings or important calls to action, you can create a strong visual impact. A "Sign Up Now" button in the middle of a landing page is likely to attract more attention.

.cta {
  text-align: center;
  font-size: 20px;
  color: blue;
}

Examples of Using text-align in CSS

Navigation Menu

A corporate website might use a centered navigation menu to improve visibility and aesthetic appeal.

nav {
  text-align: center;
  background-color: black;
  color: white;
}

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Footer Content

Many websites align footer content to the right to differentiate it from other text blocks. For instance, a blog footer might include author details and links aligned to the right.

footer {
  text-align: right;
  font-size: 12px;
}

<footer>
  <p>Written by Jane Doe</p>
  <p><a href="#privacy">Privacy Policy</a></p>
</footer>

You can right align footer content to distinguish it from the main body text.

footer {
  text-align: right;
  font-size: 12px;
}

Article Text

An educational blog might justify text in its articles to ensure clean and aligned margins for better readability.

article {
  text-align: justify;
  line-height: 1.6;
}

<article>
  <h2>The Solar System</h2>
  <p>The solar system is made up of the sun and all the objects that orbit around it...</p>
</article>

Justifying text not only ensures even margins but also improves readability by managing spacing between words.

article {
  text-align: justify;
  line-height: 1.6;
  word-spacing: 2px; /* Adjusting spacing for better readability */
}

Calls to Action

A landing page might have centered calls to action to make them stand out.

.cta {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #007bff;
}

<div class="cta">Sign Up Now!</div>

Combining text alignment with background images creates visually striking banners for landing pages.

.cta {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
  background-image: url('cta-bg.jpg');
  background-size: cover;
  padding: 20px;
}

Learn More About CSS Alignment of Text

Overriding Parent Alignment

Child elements inherit the text-align property of their parent elements. However, you can override this behavior by setting a different value on the child element.

/* Parent element has center-aligned text */
.parent {
  text-align: center;
}

/* Child overrides to left-aligned text */
.child {
  text-align: left;
}

<div class="parent">
  <h2>Parent Heading</h2>
  <p class="child">Child paragraph with left-aligned text.</p>
</div>

Using combinators, you can refine text alignment for specific child elements within a parent.

.parent > p {
  text-align: justify; /* Targets only direct child paragraphs */
}

Vertical Alignment

With the text-align property, you can only center text horizontally. To center inline or table-cell elements vertically, you can set the vertical-align property to middle. For block-level elements, you need to use other methods like Flexbox or Grid for vertical alignment.

/* Vertically aligning inline elements */
.inline-element {
  vertical-align: middle;
}
/* Vertically aligning block-level elements */
.flex-vertical-center {
  display: flex;
  align-items: center; /* Vertically centers text */
  justify-content: center; /* Horizontally centers text */
  height: 100vh; /* Full viewport height */
}

<p>
  <img src="logo.png" alt="Logo" class="inline-element">
  <span class="inline-element">Welcome to our site!</span>
</p>

<div class="flex-vertical-center">
  <p>Vertically centered text using Flexbox.</p>
</div>

Global Settings

You can use text-align within body or universal selectors to set a default alignment pattern across your web page.

body {
  text-align: left;
}

For languages written in right-to-left (RTL) scripts, such as Arabic or Hebrew, text-align should be adjusted accordingly.

body {
  direction: rtl;
  text-align: right;
}

<p>هذا نص باللغة العربية.</p>

For languages using left-to-right (LTR) scripts, the default alignment remains left.

body {
  direction: ltr;
  text-align: left;
}

In Firefox, text-align: justify; may handle word spacing slightly differently than in Chrome or Safari.

p {
  text-align: justify;
  -moz-text-align-last: center; /* Firefox-specific fix */
}