In web design, the details matter. The icons, colors, and typeface you choose all affect the readability of your content. So does how you align text on the page.

In fact, there are alignment principles in design to create organized and logical designs. Known as edge and center alignment, these principles state that elements should be organized relative to “an invisible line” or margin. According to printwand, this isn’t a literal line — it’s just implied by the way a page is arranged.

Below is an example of a business card that follows both principles and includes text that’s left, right, and center-aligned.

Business card follows center and edge alignment

Image Source

To achieve a similarly balanced look on your site, you need to know how to align your text in these three ways. While most website building platforms will provide buttons in their toolbar to simplify this process, you might be building a site, app, or graphic from scratch or in a tool without these buttons. In these cases, you’ll need to know how to align text using code.

In this post, we’ll walk through how to left align, right align, and center align text in HTML. Let’s get started.

Free Intro Guide to HTML & CSS [Download Now]

How to Align Text in HTML

Before we dive in, let’s make sure we’re on the same page about what “in HTML” means.

You used to be able to simply use the HTML align attribute to change the alignment of text. If you wanted to center the title of this web page, for example, then you’d have written the following line of HTML:

 

 

   <h1 align="center">How to Right, Left, & Center Align Text in HTML</h1>

But this attribute has since been deprecated and replaced by a much more effective way to change the presentation of text: the CSS text-align property. This property is a lightweight and flexible alternative to the HTML align attribute— and it’s not difficult to learn.

You can define this property in inline CSS, internal CSS, or external CSS. Inline CSS means your HTML and CSS will be placed together in the body section of your HTML doc. So, technically, you’ll be aligning text “in HTML.” However, it’s important to understand that the other two styles of CSS are recommended over inline CSS. That’s why we’ll also rewrite these examples using CSS that can be placed in the head section of the HTML doc or an external stylesheet. Let’s get started.

HTML Align Text Left

Aligning text against the left-hand margin is the most common alignment type because it mimics how most people read: left to right. (Please note that web pages set in certain languages, including Arabic, Hebrew, Persian, and Urdu, will have a different default orientation.)

Left alignment is particularly effective for positioning long paragraphs on a page because it creates a straight edge where the reader will start each new line of text. Right and center alignment, on the other hand, create a ragged edge that requires the reader to start each new line of text at a slightly different point. This makes the reading process slower and more frustrating. Try reading the following paragraphs to see which alignment makes the paragraph easiest to read.

Same paragraph shown left aligned, center aligned, right aligned

Image Source

For the examples below, I’ll be using the W3Schools Tryit Editor, which uses left alignment as its default. In this case, it wouldn’t be necessary to add the text-align property and set it to “left.” However, I’ll include the example in case you’re using another tool that has another default alignment or no default alignment.

Here’s how you’d write it with inline CSS:

 

 

   <h2>How to Left Align Text in HTML</h2>

<p style="text-align: left">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</p>

<h3>The Explanation</h3>

<p>Since I’m using the W3Schools Tryit Editor, the default alignment is left so this style tag is unnecessary. But if you’re using another code editor with a different or no default alignment, then this is how you’d use the text-align property in inline CSS.</p>

 

Here’s the result:

First paragraph left aligned with HTML and inline CSS

Image Source

Note that the inline CSS above would only affect the alignment of that paragraph below the H2. If you wanted to change the alignment of all paragraphs on the page, you could use internal or external CSS. Here’s the CSS:

 

 

   p {

text-align: left;

}

Here’s the HTML:

 

 

   <h2>How to Left Align Text in HTML</h2>

<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</p>

<h3>The Explanation</h3>

<p>Since I’m using the W3Schools Tryit Editor, the default alignment is left so defining the text-align property in CSS is unnecessary. But if you’re using another code editor with a different or no default alignment, then this is how you’d use the text-align property in internal or external CSS.</p>

 

Here’s the result:

Paragraphs left aligned with HTML and internal CSS

Image Source

HTML Align Text Right

Aligning text against the right-hand margin is the least common alignment type since it goes against how most people read text. Though it requires more effort to read, right aligned text — when used strategically — can help create an unconventional look for your magazine cover, resume, poetry, posters, business cards, or other short-form content.

Here’s an example of the striking effect right aligned text can have:

Right aligned, colorful text on web page

Image Source

Let’s say I want to right align the title of a page, but keep everything else left aligned. Then I could use the following HTML with inline CSS:

 

 

   <h1 style="text-align: right">How to Right Align Text in HTML</h1>

<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</p>

<h3>The Explanation</h3>

<p>Since I’m using the W3Schools Tryit Editor, the default alignment is left. So if you want to change the alignment of a single element, like the title, then you can use a style attribute that contains the CSS text-align property set to “right.” Everything else on the page will remain flushed against the left margin.</p>

 

Here’s the result:

One heading right aligned with HTML and inline CSS

Image Source

Now let’s say I want to right align all headings on the page. Then I could use a CSS selector to target all headings and place it inside the head section of the page.

Here’s the CSS:

 

 

   h2 {

text-align: right;

}

 

Here’s the HTML:

 

 

   <h2>How to Right Align Text in HTML</h2>

<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</p>

<h2>The Explanation</h2>

<p>Since I’m using the W3Schools Tryit Editor, the default alignment is left. So if you want to change the alignment of a single element, like the title, then you can use a style attribute that contains the CSS text-align property set to “right.” Everything else on the page will remain flushed against the left margin.</p>

 

Here’s the result:

Headings right aligned with HTML and CSS

Image Source

HTML Align Text Center

Aligning text along the center axis is a common — and often overused — alignment type. While it makes the page look organized and symmetrical, centering everything on the page can be boring.

Plus, centering large paragraphs of text makes the reading experience more difficult. So center alignment should be saved for titles, block quotes, call-to-action buttons, and other elements that should disrupt the flow of the document to grab the reader’s attention.

Here’s a creative example of using center alignment on the most important elements on your homepage:

Website homepage with center aligned text and button text

Image Source

Let’s say I’m building a web page with the Bootstrap framework and I want to center align the Bootstrap button text, but keep everything else left aligned. The process would be slightly different since the button element is an inline element and the text-align property only works on block-level elements like headings and paragraphs.

So first I’d have to wrap the button in a div container. Then I could apply the inline CSS to the div as shown below:

 

 

   <h1>How to Center Align Text in HTML</h1>

<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</p>

<h3>The Explanation</h3>

<p>Since I’m using the W3Schools Tryit Editor, the default alignment is left. So if you want to change the alignment of a single element, like the title, then you can use a style attribute that contains the CSS text-align property set to “right.” Everything else on the page will remain flushed against the left margin.</p>

<div style="text-align:center">

<button type="button" class="btn btn-primary">Click Me</button>

</div>

 

Here’s the result:

Button text center aligned with HTML and inline CSS

Image Source

Now let’s say I have multiple Bootstrap buttons on the page and want to center align all of them. Then I could use the following CSS and add it to the head section of my web page:

 

 

   .button {

  text-align: center;

  }

 

Here’s the HTML:

 

 

   <h1>How to Center Align Text in HTML</h1>

<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</p>

<div class="button">

<button type="button" class="btn btn-primary">Click Me</button>

</div>

<h3>The Explanation</h3>

<p>Since I’m using the W3Schools Tryit Editor, the default alignment is left. So if you want to change the alignment of a single element, like a button, then you can use a style attribute that contains the CSS text-align property set to “center.” Everything else on the page will remain flushed against the left margin.</p>

<div class="button">

<button type="button" class="btn btn-primary">Click Me</button>

</div>



Here’s the result:

Button text center aligned with HTML and CSS

Image Source

Aligning Your Text with HTML & CSS

If you have some basic web design knowledge, you can change the alignment of your text. This can help you build and customize your page layouts and make your content more readable. If you’re building with the Bootstrap framework, check out other ways you can override the default styling in Bootstrap CSS to create a truly unique website.

New Call-to-action

 css introduction

Originally published Aug 24, 2020 7:00:00 AM, updated August 24 2020

Topics:

HTML