Xopus

Main Menu

  • Schemas
  • CSS
  • Chrome
  • Firefox
  • Fund

Xopus

Header Banner

Xopus

  • Schemas
  • CSS
  • Chrome
  • Firefox
  • Fund
CSS
Home›CSS›Align things with CSS Text Align property

Align things with CSS Text Align property

By Warren B. Obrien
June 15, 2021
0
0



One of the first features that all developers learned when they got started with word processing was text alignment. This little tool has been vital for professional typographers and hobbyist flyer designers. It’s no surprise that CSS supports text alignment when it comes to web design.

the align text The property, along with one or two others, controls how an element horizontally aligns its text. Beyond the basics, browsers slowly implement more specifications, but full support varies. Find out how to align text and what features popular browsers support today.

The basics of the CSS text-align property

Alignment is one of the most familiar typographical terms. As part of the CSS, align text refers to horizontal alignment.

Horizontal text alignment only applies to block containers. These are full width elements such as paragraphs and divs. Using the align text property on an inline element such as em will have no effect. You can also align list items and table cells:

A screenshot of a browser showing a paragraph, table, and list with various CSS text alignment values

By default, in a left-to-right language (more on this later), the text aligns to the left:

A screenshot of a browser showing a paragraph with left aligned text by default

In CSS it is the same as:

p { text-align: left; }

Or:

p { text-align: start; }

Related: What Are Cascading Style Sheets For And What Is CSS For?

You can use other values ​​for the align text property to change the horizontal alignment. The most common values ​​are known to word processing applications:

text-align: left
text-align: center
text-align: right

A screenshot of a browser showing paragraphs with text aligned left, right, and center

Use justification to align left and right edges

Another common value for align text is to justify. Browsers add space to justified text so that each line expands to fill the available space:

A screenshot of a browser showing a paragraph of justified text

When justifying text, the last line can be tricky. Since it can be very short (maybe just a single word), the full-width spacing can be ugly. By default, even justified text will align the last row to the left.

Sometimes you may want a different effect. Browser implementations are catching up with the specification, but two approaches are possible.

the justify everything The value should mean that browsers treat the last line like any other and stretch it across the width. However, at the time of writing, no browser supports this value. You can check caniuse to see if they do when you read this article.

Another CSS property, text-align-last, is more flexible and benefits from better support. You can treat it more or less the same as align text, but this only applies to the last line:

A screenshot of a browser showing paragraphs with their last lines aligned differently

Browser support for this property is better, but not perfect. Again, check caniuse before using it. If a browser does not recognize this property, it will ignore it.

Text alignment and reading direction

You may be working with a language, such as Arabic or Hebrew, that is read from right to left. CSS uses the direction property to specify this, for example:

direction: rtl;

These languages ​​usually right-align text by default.

Instead of having to specify left/right, the preferred method of aligning text is using values start and finish. This specifies whether the text should line up at the start of each line or at the end. In languages ​​from left to right, start is equivalent to left. In a language written from right to left, text begins on the right and ends on the left.

A screenshot of a browser showing a right-to-left paragraph of text aligned at the beginning

Using start or finish means that, regardless of the direction of the text, the alignment is consistent.

How elements inherit from the text-align property

You should know that the align text the property inherits. For example, if you set it to body element, it will apply to every element on the page. You can, of course, override it on any element.

Using the text-align property to control page layout

You can use the align text CSS property to define how browsers lay out text horizontally. The most common values ​​are left, right, center, and to justify. These are quite simple, although to justify introduces some complexity.

You should use text alignment sparingly. On billboards and posters, center alignment may be appropriate, but it can make longer blocks of text difficult to read. The justification is generally more readable when the lines of text are longer. Justifying short columns of text can create awkward spacing.

the align text The property is one of many CSS properties that provide useful formatting and basic positioning.


css-code-in-10-minutes

10 Simple CSS Code Examples You Can Learn In 10 Minutes

Want to learn more about using CSS? Try out these basic CSS code samples to get started, then apply them to your own web pages.

Read more


About the Author

Bobby jack
(48 published articles)

Bobby is a technology enthusiast who has worked as a software developer for almost two decades. He is passionate about games, works as a review writer for Switch Player Magazine, and is immersed in all aspects of online publishing and web development.

More from Bobby Jack

Subscribe to our newsletter

Join our newsletter for technical tips, reviews, free ebooks and exclusive offers!

One more step…!

Please confirm your email address in the email we just sent you.

.



Related posts:

  1. What are Cascading Style Sheets and what is CSS for?
  2. Update from the European Commission: The future revision of REACH and the restriction of PFAS | Jones Day
  3. The Greeting Cards Market Expected To Experience High Growth By 2026
  4. Virtual Healthcare Assistant Market to Grow Exponentially Between 2021 and 2028 | Key players – CSS Corp, eGain, idAvatars, Kognito, MedRespond

Recent Posts

  • This Keyboard Shortcut Can Undo Your Most Annoying Browser Mistake
  • UCSF and I-SPY 2 breast cancer researchers develop newly redefined breast cancer response subtypes
  • India-based web design company promises free food to children in need
  • Global Chromium Powder Market Size 2022 Booming By Share, Growth Size, Scope, Key Segments And Forecast To 2029 – Industrial Computing
  • Google Search Adds Author Markup Best Practices

Archives

  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021

Categories

  • Chrome
  • CSS
  • Firefox
  • Fund
  • Schemas
  • Terms and Conditions
  • Privacy Policy