CSS Text Align – Centered, Justified, Right Aligned Text Style Example (2024)

We use the CSS text-align property to align content inside a block-level element.

Examples of block-level elements are paragraphs (<p>...</p>), divs (<div>...</div>), sections (<section>...</section>), articles (<article>...</article>), and so on.

This alignment affects the horizontal axis only. So the text-align property is different from the vertical-align property which we use to set the vertical alignment of an element.

Table of Contents

  • Basic Syntax
  • Values of the text-align Property
  • The left Value
  • The center Value
  • The right Value
  • The justify Value
  • The inherit Value
  • Conclusion

Basic Syntax

Here's the basic syntax for the text-align property:

block-level-element { text-align: value; }

Now we'll look at the different values it can take to help you position things on the page.

Values of the text-align Property

The text-align property accepts left, center, right, justify, and inherit as values.

We will take a look at these values one by one.

Before I dive into the values and what they look like in the browser, take a look at the below CSS. I set these styles for improved visibility, so you can see things better:

 body { display: flex; align-items: center; justify-content: center; height: 100vh; } div { background-color: #adadad; width: 40rem; height: 4rem; padding: 3rem 0.5rem; }

The left Value

The left value of the text-align property is the default. So, every content inside a block-level element is aligned to the left by default.

 div { text-align: left; }

CSS Text Align – Centered, Justified, Right Aligned Text Style Example (1)

If you want the content inside a block-level element to align to the left, you don't need to assign it a text-align value of left. If you do, you're just duplicating what's already the default.

The center Value

With the center value, spaces are created on the left and right, so, everything gets pushed to the center.

If you want to align the content inside a block-level element to the center, the center value is your best bet.

 div { text-align: center; }

CSS Text Align – Centered, Justified, Right Aligned Text Style Example (2)

The right Value

Assigning a value of right to the text-align property pushes the content inside a block-level element to the right.

 div { text-align: right; }

CSS Text Align – Centered, Justified, Right Aligned Text Style Example (3)

The justify Value

The justify value of the text-align property lines up the content on the left and right edges of the block-level element (the box). If the last line isn't a full line, then it leaves it alone. It's easier to see how this works in the image below:

 div { text-align: justify; }

CSS Text Align – Centered, Justified, Right Aligned Text Style Example (4)

The inherit Value

The inherit value of the text-align property behaves as the name implies. An element with its text-align value set to inherit inherits the text-align value of its direct parent.

 div { text-align: inherit; }

CSS Text Align – Centered, Justified, Right Aligned Text Style Example (5)

In this case, our div inherits the text-align value of the body – which is left by default.

If the text-align value of the body is set to right, and that of the div is left to inherit, the text inside the div aligns to the right.

 body { text-align: right; } div { text-align: inherit; }

CSS Text Align – Centered, Justified, Right Aligned Text Style Example (6)

Conclusion

In this article, you learned about the CSS text-align property and its values.

The examples we looked at here to see how the values behave contained text only – so you might be wondering if the values work on images too. Well, yes they do.

Below is an image inside a div with text-align set to center:

 <div> <img src="coming-soon.jpg" alt="coming_soon" width="74px" height="54px" /></div>
 div { text-align: center; }

CSS Text Align – Centered, Justified, Right Aligned Text Style Example (7)

Thank you for reading.

CSS Text Align – Centered, Justified, Right Aligned Text Style Example (2024)

FAQs

How to justify center text in CSS? ›

To center text in CSS, use the text-align property and define it with the value 'center.' You can use this technique inside block elements, such as divs.

Which of these is an example of justified text alignment? ›

When you "justify" text in a Word document, you give your text straight edges on both sides of the paragraph. Justifying extends each line of your text from the left margin to the right margin.

Which of the following is to align text in CSS text text alignment text-align text position? ›

The text-align property is used to set the horizontal alignment of a text. A text can be left or right aligned, centered, or justified.

How to text-align center and justify in HTML? ›

// Syntax text-align: start; text-align: end; text-align: left; text-align: right; text-align: center; text-align: justify; If you want to align the entire text on your web page, you can apply this property to any tag containing the text, such as the div tag, heading, paragraph, or body tag.

How to do text-align justify? ›

The last line in the paragraph is aligned left.
  1. Click anywhere in the paragraph that you want to justify.
  2. On the Home tab, in the Paragraph group, click Justify Text .

What is text justify in CSS? ›

The text-justify property in CSS is used to set the text-align to justify. It spreads the words into a complete line.

How to align a text in CSS? ›

To just center the text inside an element, use text-align: center; This text is centered.

What does justified text look like? ›

If the text is right-aligned, the invisible vertical line sits to the right-hand side of the paragraph; if the text is center-aligned, the line sits in the center of the paragraph. It's possible to have the text aligned to both left and right; this is known as justified text.

What are the 4 types of alignment? ›

What are the different types of alignment? There are four main types of alignment commonly used in design: left alignment, right alignment, center alignment, and justified alignment.

What is one example of alignment? ›

Alignment has to do with adjusting something so it's in the right place. If you take your car in for a wheel alignment, the mechanic will make sure the wheels are on straight. Alignment can also mean following directions or being in agreement. Your school has to act in alignment with state education rules.

What is the difference between align and justify? ›

Align is Y axis, justify is X axis, sort of. XY axis depending on the “orientation” of the flex. For flex-direction row, justify is horizontal (X) and align is vertical (Y).

How do I align text and image in CSS? ›

How do I align text with images above it? The alignment of text or other elements is done through the css style text-align , which can be these values: center , justify , left ( start ), right ( end ), inherit . The property is applied to the parent element.

What is text-align and text-align last? ›

The text-align-last property specifies how to align the last line of a text. Notice that the text-align-last property sets the alignment for all last lines within the selected element. So, if you have a <div> with three paragraphs in it, text-align-last will apply to the last line of EACH of the paragraphs.

How to align a text in center in HTML? ›

<center>: The Centered Text element
  1. Example 1. html play. <center> This text will be centered. < p>So will this paragraph.</ ...
  2. Example 2 (CSS alternative) html play. <div style="text-align:center"> This text will be centered. < ...
  3. Example 3 (CSS alternative) html play. <p style="text-align:center"> This line will be centered.<
Jan 2, 2024

How do you move text to the right in CSS? ›

  1. The easiest way to move a text element in CSS is to use the "margin" property. ...
  2. In this code, the "margin-top" property moves the text element down by 20 pixels, while the "margin-left" property moves the text element to the right by 30 pixels.
Mar 19, 2017

How do I make text right justified in HTML? ›

To set text alignment in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property text-align for the center, left, and right alignment.

How do I move text to the right side of the screen in CSS? ›

The easiest way to move content is the float property. It will take content and move it to the left or right sides of the page. Asides like this are floated to the right in this Guide's CSS. When floated content moves, whatever content follows it will move up, and flow around it.

References

Top Articles
Latest Posts
Article information

Author: Pres. Lawanda Wiegand

Last Updated:

Views: 5287

Rating: 4 / 5 (71 voted)

Reviews: 94% of readers found this page helpful

Author information

Name: Pres. Lawanda Wiegand

Birthday: 1993-01-10

Address: Suite 391 6963 Ullrich Shore, Bellefort, WI 01350-7893

Phone: +6806610432415

Job: Dynamic Manufacturing Assistant

Hobby: amateur radio, Taekwondo, Wood carving, Parkour, Skateboarding, Running, Rafting

Introduction: My name is Pres. Lawanda Wiegand, I am a inquisitive, helpful, glamorous, cheerful, open, clever, innocent person who loves writing and wants to share my knowledge and understanding with you.