CSS Text Alignment: Properties, Values and Examples

CSS Text Alignment: A Complete Guide to Aligning Text in CSS

CSS text alignment controls how text and other inline content are positioned inside an element. You can align content to the left, right, center, start, or end. You can also justify text so that each line fills the available width.

The main property used for this purpose is text-align.

p {
  text-align: center;
}

Although the property appears simple, correct text alignment involves writing direction, inheritance, multilingual layouts, readability, and related properties such as text-align-last.

What Is CSS Text Alignment?

CSS text alignment is the process of positioning inline-level content within a block container or table cell.

Inline-level content includes:

Plain text
Links
Images displayed inline
<span> elements
Inline buttons
Other inline or inline-block elements

The text-align property aligns this content along the elements inline axis. In normal English text, that axis runs horizontally from left to right.

According to the CSS specification, alignment happens within each line boxnot directly against the browser window. MDN Web Docs and the W3C CSS Text specification provide the formal definitions.

Basic Syntax

selector {
  text-align: value;
}

Example:

.article-title {
  text-align: center;
}

HTML:

<h2 class="article-title">Learning CSS Text Alignment</h2>

The headings text will appear in the horizontal center of its available content area.

Common `text-align` Values

The following values are used most often:

Value	Purpose
`left`	Aligns content with the left edge
`right`	Aligns content with the right edge
`center`	Centers inline content
`justify`	Adjusts spacing so lines fill the width
`start`	Aligns content with the start of the writing direction
`end`	Aligns content with the end of the writing direction
`match-parent`	Uses the parents alignment after resolving writing direction

Global CSS values such as inherit, initial, unset, revert, and revert-layer can also be used.

Left Alignment

The left value places inline content against the left side of its line box.

p {
  text-align: left;
}

Left alignment is the familiar default appearance for languages written from left to right, including English, Hindi, and Odia.

Example:

<p class="left-text">
  This paragraph is aligned to the left.
</p>

.left-text {
  text-align: left;
}

Left-aligned text is generally easy to read because every line begins from a predictable position. It is therefore commonly used for:

Articles
Blog posts
Product descriptions
Forms
Documentation
News reports
Long paragraphs

However, left is a physical alignment value. It always refers to the physical left side, regardless of the languages writing direction.

Right Alignment

The right value places inline content against the right side.

.right-text {
  text-align: right;
}

Example:

<p class="right-text">Last updated: August 31, 2026</p>

Right alignment can be useful for:

Dates
Signatures
Invoice amounts
Numerical table columns
Short labels
Languages written from right to left

Avoid applying right alignment to long left-to-right paragraphs. The changing starting position of every line can make the text difficult to scan.

Like left, right is a physical value. It does not automatically adapt to the documents writing direction.

Center Alignment

The center value places inline content in the horizontal center of the line box.

.center-text {
  text-align: center;
}

Example:

<section class="welcome">
  <h2>Welcome to Our Website</h2>
  <p>Learn web development through simple tutorials.</p>
</section>

.welcome {
  text-align: center;
}

Because text-align is inherited, both the heading and paragraph receive the center alignment.

Center alignment is suitable for:

Headings
Hero sections
Short introductions
Call-to-action sections
Navigation items
Captions
Empty-state messages
Dialog headings

It is usually not suitable for long paragraphs. A large centered paragraph has uneven starting points, which can reduce readability.

Justified Text

The justify value adjusts spacing so that each eligible line fills the available width.

.article-content {
  text-align: justify;
}

The browser usually changes the space between words to align both sides of the paragraph.

<p class="article-content">
  CSS provides several properties for controlling the presentation,
  spacing, direction, decoration, and alignment of text.
</p>

.article-content {
  text-align: justify;
}

The final line normally remains aligned to the start instead of being stretched.

Advantages of justified text

Produces clean left and right edges
Can give content a formal appearance
Is often used in newspapers, magazines, and books
May work well in sufficiently wide columns

Disadvantages of justified text

Can create large and uneven spaces between words
May produce distracting visual gaps called rivers
Can be difficult to read in narrow containers
May create poor results with long words
Can reduce readability for some people with cognitive or visual disabilities

Use justification carefully, especially on mobile screens.

A better result may be achieved by combining it with hyphenation:

.article-content {
  text-align: justify;
  hyphens: auto;
}

The relevant language should be declared in HTML so the browser can apply language-appropriate hyphenation:

<html lang="en">

Browser behavior and dictionary support for automatic hyphenation can vary.

Logical Alignment with `start` and `end`

The start and end values are logical values. They adapt to the text direction.

.message {
  text-align: start;
}

For left-to-right text:

start normally behaves like left
end normally behaves like right

For right-to-left text:

start normally behaves like right
end normally behaves like left

Example:

<p class="english" dir="ltr">English content</p>
<p class="arabic" dir="rtl">????? ?????? ???????</p>

.english,
.arabic {
  text-align: start;
}

The English content begins on the left, while the Arabic content begins on the right.

Why logical values are recommended

start and end are better choices for multilingual websites because the same stylesheet can support different writing directions.

.article {
  text-align: start;
}

This is generally more flexible than:

.article {
  text-align: left;
}

Use physical values when the content must remain attached to a specific physical side. Use logical values when alignment should follow the language or writing mode.

Understanding `match-parent`

The match-parent value is similar to inherit, but it resolves the parents logical start or end value using the parents writing direction.

.child {
  text-align: match-parent;
}

This value is useful in specialized bidirectional layouts. Most ordinary designs can use inherit, start, or end instead.

Global Values

The text-align property accepts standard global CSS values.

`inherit`

Uses the computed value from the parent:

.child {
  text-align: inherit;
}

`initial`

Restores the propertys initial value:

.element {
  text-align: initial;
}

The formal initial value is start.

`unset`

Acts like inherit for inherited properties and like initial for non-inherited properties.

Because text-align is inherited, unset normally behaves like inherit.

.element {
  text-align: unset;
}

`revert`

Returns the property to the value established by an earlier cascade origin, such as the browser stylesheet.

.element {
  text-align: revert;
}

`revert-layer`

Returns the property to the value from an earlier CSS cascade layer.

.element {
  text-align: revert-layer;
}

The `text-align` Property Is Inherited

Child elements normally inherit text alignment from their parent.

<div class="card">
  <h2>CSS Tutorial</h2>
  <p>Learn how text alignment works.</p>
  <a href="#">Read more</a>
</div>

.card {
  text-align: center;
}

The heading, paragraph, and link are centered because their inline content inherits the alignment.

A child can override it:

.card p {
  text-align: start;
}

Now the heading and link remain centered, while the paragraph is aligned to the logical start.

What Does `text-align` Actually Align?

A common misunderstanding is that text-align moves the selected block element itself. It does not.

Consider this example:

<div class="wrapper">
  <div class="box">Content</div>
</div>

.wrapper {
  text-align: center;
}

.box {
  width: 300px;
}

If .box is a normal block-level element, text-align: center will not center the box. It only centers inline content inside .wrapper.

To center a fixed-width block element, use auto margins:

.box {
  width: 300px;
  margin-inline: auto;
}

Alternatively, use Flexbox:

.wrapper {
  display: flex;
  justify-content: center;
}

Therefore:

Use text-align to align text and inline content.
Use margins, Flexbox, or Grid to position block-level layout boxes.

Centering an Inline Image

An image behaves as an inline element by default. It can therefore be centered using text-align on its parent.

<div class="image-wrapper">
  <img src="example.jpg" alt="Mountain landscape">
</div>

.image-wrapper {
  text-align: center;
}

If the image is changed to display: block, center it with margins:

.image-wrapper img {
  display: block;
  margin-inline: auto;
}

Aligning Buttons and Links

Inline and inline-block elements can be aligned through their parent.

<div class="actions">
  <a href="#" class="button">Get Started</a>
</div>

.actions {
  text-align: center;
}

.button {
  display: inline-block;
  padding: 10px 18px;
}

The link is centered because it is an inline-block element inside a center-aligned container.

Aligning Text Inside a Button

To align the label inside a button, apply text-align to the button itself.

button {
  width: 220px;
  text-align: center;
}

For a button that combines an icon and text, Flexbox often provides more precise control:

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

Here, justify-content positions the Flexbox items. It is different from aligning ordinary inline text with text-align.

CSS Text Alignment in Tables

You can align table-cell content by applying text-align to <th> or <td> elements.

th {
  text-align: start;
}

td {
  text-align: start;
}

td.amount {
  text-align: end;
}

Example:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th class="amount">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Keyboard</td>
      <td class="amount">?1,500</td>
    </tr>
  </tbody>
</table>

.amount {
  text-align: end;
}

Text is usually aligned to the start, while numerical data is often aligned to the end. This makes numbers easier to compare.

Old HTML attributes such as align="center" are obsolete. Modern websites should use CSS.

Controlling the Last Line with `text-align-last`

The text-align-last property controls the alignment of the last line of a block or a line immediately before a forced line break. It is widely available in modern browsers. MDNs text-align-last reference documents its current behavior.

p {
  text-align: justify;
  text-align-last: center;
}

The paragraph is justified, but its final line is centered.

Common values include:

text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;

The default value is auto.

If text-align is justify, an auto final line normally aligns to the start.

Practical example

.introduction {
  text-align: justify;
  text-align-last: start;
}

This keeps the final line in a natural reading position.

Changing the Justification Method

The text-justify property controls how spacing is adjusted when text-align: justify is active.

.article {
  text-align: justify;
  text-justify: inter-word;
}

Possible values include:

Value	Meaning
`auto`	Lets the browser choose a suitable method
`none`	Disables justification
`inter-word`	Changes spacing mainly between words
`inter-character`	Changes spacing between characters

Example:

.cjk-text {
  text-align: justify;
  text-justify: inter-character;
}

Support for text-justify is not fully consistent across major browsers, so it should be treated as an enhancement rather than a requirement. MDN compatibility guidance currently marks it as having limited availability.

Horizontal and Vertical Alignment Are Different

text-align does not vertically center text.

This code only controls inline-axis alignment:

.box {
  text-align: center;
}

To center content both horizontally and vertically, Flexbox is usually appropriate:

.box {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

Here:

justify-content aligns flex items on the main axis.
align-items aligns them on the cross axis.
text-align centers multiple lines of text inside the item.

Using Grid

CSS Grid provides another concise method:

.box {
  min-height: 200px;
  display: grid;
  place-items: center;
  text-align: center;
}

About `vertical-align`

The vertical-align property does not normally center a block inside another block. It primarily affects inline, inline-block, and table-cell boxes. MDNs vertical-align guide explains these use cases.

Text Alignment and Writing Direction

The direction property establishes whether text flows from left to right or right to left.

.english {
  direction: ltr;
  text-align: start;
}

.arabic {
  direction: rtl;
  text-align: start;
}

In HTML, the dir attribute is generally the correct way to declare the semantic direction of content:

<p dir="rtl">??? ?? ?????? ???????.</p>

Do not use text alignment as a substitute for writing direction.

For example, this visually moves Arabic text to the right but does not establish correct bidirectional behavior:

.arabic {
  text-align: right;
}

A better approach is:

<p lang="ar" dir="rtl">??? ?? ?????? ???????.</p>

p {
  text-align: start;
}

Text Alignment in Vertical Writing Modes

CSS supports vertical writing through writing-mode.

.vertical-text {
  writing-mode: vertical-rl;
  text-align: start;
}

In vertical writing modes, the inline axis is vertical. As a result, start and end may represent the top or bottom of a line rather than the physical left or right.

This is another reason logical values are useful. They follow the writing mode automatically. The writing-mode documentation explains how line flow changes in horizontal and vertical scripts.

Responsive Text Alignment

Alignment may need to change according to screen size.

For example, a hero section might be centered on mobile devices but aligned to the start on larger screens.

.hero {
  text-align: center;
}

@media (min-width: 768px) {
  .hero {
    text-align: start;
  }
}

Another common example is a responsive navigation menu:

.navigation {
  text-align: start;
}

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

Choose breakpoints according to the point where the content or design needs adjustmentnot merely according to a particular device model.

Aligning Placeholder Text

Text inside form controls can also be aligned.

input {
  text-align: center;
}

To align only the placeholder:

input::placeholder {
  text-align: center;
}

Be careful with forms. Start-aligned input is usually easier to use for names, email addresses, and long text. Center alignment may work for:

Verification codes
Search boxes
Short numeric fields
Small promotional forms

Useful Practical Examples

Centered heading with start-aligned content

<article class="post">
  <h2>Understanding CSS</h2>
  <p>CSS controls the presentation of web pages.</p>
</article>

.post h2 {
  text-align: center;
}

.post p {
  text-align: start;
}

End-aligned metadata

.post-meta {
  text-align: end;
  color: #666;
  font-size: 0.875rem;
}

Centered card content

.profile-card {
  max-width: 360px;
  padding: 24px;
  margin-inline: auto;
  text-align: center;
}

Start-aligned multilingual content

.content {
  text-align: start;
}

<section class="content" lang="en" dir="ltr">
  English content
</section>

<section class="content" lang="ar" dir="rtl">
  ????? ????
</section>

Justified article with safer spacing

.article-body {
  max-width: 70ch;
  margin-inline: auto;
  text-align: justify;
  hyphens: auto;
  line-height: 1.7;
}

Accessibility and Readability

Text alignment is not purely decorative. It can affect how easily people understand content.

Keep long paragraphs start-aligned

Start alignment creates a consistent point from which readers can begin each line.

.article p {
  text-align: start;
}

Limit centered text

Centered text works best for short content. Avoid centering:

Long articles
Detailed instructions
Legal information
Long lists
Large form labels
Multi-paragraph descriptions

Use justification cautiously

Justification can create irregular gaps between words, particularly in narrow layouts. Test it at different viewport widths and text sizes.

Do not use spaces for alignment

This is incorrect:

<p>&nbsp;&nbsp;&nbsp;&nbsp;Centered text</p>

Spaces do not provide reliable alignment. They can break when font size, screen width, or content changes.

Use CSS:

p {
  text-align: center;
}

Test zoom and larger text

A design that looks balanced at the default font size may become difficult to read when users zoom the page or increase text size.

Respect language direction

Use appropriate lang and dir attributes. Logical values such as start and end help the design adapt naturally.

Common Mistakes

Applying `text-align` directly to text syntax

This is invalid:

<p text-align="center">Text</p>

Use CSS:

<p class="centered">Text</p>

.centered {
  text-align: center;
}

Using the obsolete HTML `align` attribute

Avoid:

<p align="center">Text</p>

Use:

p {
  text-align: center;
}

Trying to center a block element

This will not necessarily center the .card box:

.container {
  text-align: center;
}

Use:

.card {
  max-width: 400px;
  margin-inline: auto;
}

Confusing `align-items` with `text-align`

align-items controls the alignment of flex or grid items. It does not replace text-align.

.container {
  display: flex;
  align-items: center;
}

If the text inside a flex item must also be centered:

.container {
  display: flex;
  align-items: center;
}

.container-item {
  text-align: center;
}

Using `justify-content` without Flexbox or Grid

This may have no desired effect:

.box {
  justify-content: center;
}

The property requires an appropriate layout context:

.box {
  display: flex;
  justify-content: center;
}

Justifying narrow columns

A narrow justified paragraph may develop large gaps:

.sidebar {
  width: 220px;
  text-align: justify;
}

For narrow content, use:

.sidebar {
  width: 220px;
  text-align: start;
}

Best Practices

For reliable and readable text alignment:

Use start for most body content.
Use center for short headings and focused interface messages.
Use end for dates, totals, and some numerical information.
Use justify carefully and test it on small screens.
Declare the correct language and writing direction.
Avoid obsolete HTML alignment attributes.
Do not use spaces or non-breaking spaces for visual alignment.
Use Flexbox or Grid for aligning layout boxes.
Use margin-inline: auto to center a fixed-width block.
Test alignment with long text, translated text, zoom, and mobile layouts.
Keep paragraphs at a comfortable line length, often around 60ch to 75ch.

Complete Example

<article class="article">
  <header class="article-header">
    <h2>CSS Text Alignment</h2>
    <p class="subtitle">
      A practical guide to readable web typography
    </p>
  </header>

  <p class="article-meta">
    Updated August 31, 2026
  </p>

  <div class="article-body">
    <p>
      The text-align property controls the inline alignment of text
      and other inline-level content inside a block container.
    </p>

    <p>
      Logical values such as start and end make layouts more suitable
      for multilingual websites.
    </p>
  </div>

  <footer class="article-footer">
    <a href="#">Read the next tutorial</a>
  </footer>
</article>

.article {
  max-width: 70ch;
  margin-inline: auto;
  padding: 24px;
}

.article-header {
  text-align: center;
}

.subtitle {
  color: #555;
}

.article-meta {
  text-align: end;
  font-size: 0.875rem;
  color: #666;
}

.article-body {
  text-align: start;
  line-height: 1.7;
}

.article-footer {
  text-align: center;
  margin-block-start: 32px;
}

This example uses:

Center alignment for the title area
End alignment for metadata
Start alignment for readable paragraphs
Center alignment for the final call to action
Logical margins for adaptable block centering

Frequently Asked Questions

What is the default value of `text-align`?

The formal initial value is start. In a normal left-to-right English document, this usually appears as left-aligned text.

Is `text-align` inherited?

Yes. Child elements normally inherit the computed text alignment of their parent unless they declare another value.

How do I center text in CSS?

Use:

.element {
  text-align: center;
}

How do I align text vertically?

text-align does not control vertical positioning. Use Flexbox, Grid, or an appropriate vertical-align use case.

.element {
  display: flex;
  align-items: center;
}

Why is `text-align: center` not centering my `<div>`?

It centers inline content inside the element. It does not center the block element itself. Use margin-inline: auto, Flexbox, or Grid to center the block.

What is the difference between `left` and `start`?

left always refers to the physical left side. start follows the writing direction and writing mode.

What is the difference between `right` and `end`?

right always means the physical right side. end represents the ending edge of the current writing direction.

Can `text-align` center an image?

Yes, if the image is inline and text-align: center is applied to its parent.

.image-container {
  text-align: center;
}

How can I justify the final line?

Use:

p {
  text-align: justify;
  text-align-last: justify;
}

Use this carefully because a short final line may develop extremely large spaces.

Should body text be centered?

Long body text should usually be aligned to the start. Center alignment is more appropriate for short headings, labels, and introductions.

Conclusion

CSS text alignment is an essential part of readable and responsive web design. The text-align property controls the inline alignment of text, images, links, and other inline content inside a block container.

Values such as left, right, and center provide physical alignment, while start and end create flexible layouts that respond to language direction and writing mode. The justify value can produce neat edges, but it must be used carefully to avoid uneven spacing.

For modern websites, text-align: start is often the safest choice for paragraphs. Center alignment works well for short interface content, while Flexbox, Grid, and auto margins should be used when the goal is to position complete layout elements rather than text.

CSS Text Alignment: A Complete Guide to Aligning Text in CSS

What Is CSS Text Alignment?

Basic Syntax

Common text-align Values

Left Alignment

Right Alignment

Center Alignment

Justified Text

Advantages of justified text

Disadvantages of justified text

Logical Alignment with start and end

Why logical values are recommended

Understanding match-parent

Global Values

inherit

initial

unset

revert

revert-layer

The text-align Property Is Inherited

What Does text-align Actually Align?

Centering an Inline Image

Aligning Buttons and Links

Aligning Text Inside a Button

CSS Text Alignment in Tables

Controlling the Last Line with text-align-last

Practical example

Changing the Justification Method

Horizontal and Vertical Alignment Are Different

Using Grid

About vertical-align

Text Alignment and Writing Direction

Text Alignment in Vertical Writing Modes

Responsive Text Alignment

Aligning Placeholder Text

Useful Practical Examples

Centered heading with start-aligned content

End-aligned metadata

Centered card content

Start-aligned multilingual content

Justified article with safer spacing

Accessibility and Readability

Keep long paragraphs start-aligned

Limit centered text

Use justification cautiously

Do not use spaces for alignment

Test zoom and larger text

Respect language direction

Common Mistakes

Applying text-align directly to text syntax

Using the obsolete HTML align attribute

Trying to center a block element

Confusing align-items with text-align

Using justify-content without Flexbox or Grid

Justifying narrow columns

Best Practices

Complete Example

Frequently Asked Questions

What is the default value of text-align?

Is text-align inherited?

How do I center text in CSS?

How do I align text vertically?

Why is text-align: center not centering my <div>?

What is the difference between left and start?

What is the difference between right and end?

Can text-align center an image?

How can I justify the final line?

Should body text be centered?

Conclusion

Related

Common `text-align` Values

Logical Alignment with `start` and `end`

Understanding `match-parent`

`inherit`

`initial`

`unset`

`revert`

`revert-layer`

The `text-align` Property Is Inherited

What Does `text-align` Actually Align?

Controlling the Last Line with `text-align-last`

About `vertical-align`

Applying `text-align` directly to text syntax

Using the obsolete HTML `align` attribute

Confusing `align-items` with `text-align`

Using `justify-content` without Flexbox or Grid

What is the default value of `text-align`?

Is `text-align` inherited?

Why is `text-align: center` not centering my `<div>`?

What is the difference between `left` and `start`?

What is the difference between `right` and `end`?

Can `text-align` center an image?