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. 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 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; }

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>

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>

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>

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>

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;
}