Which alignment align the text from left and right?

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

In fact, there are alignment principles in design to create organized, logical, and readable designs. Known as edge and center alignment, these principles state that elements should be organized relative to “an invisible line” or margin.

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

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 to simplify this process, you might be building a site, app, or graphic from scratch or in a tool without these options. 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 with HTML and CSS.

Since alignment is a type of page styling, the best way to align HTML content on the page is with the CSS text-align property. text-align sets the horizontal alignment of content inside a block element (i.e., an element that starts a new line and takes up the entire width of the page, like

) or a table cell. While the name text-align implies that this property works on text, it also affects all other content inside the block element, including images and buttons.

You can use the text-align 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 document. So, technically, you’ll be aligning text “in HTML.” 

However, internal and external CSS are recommended over inline CSS. This is because separating your style code (CSS) from your content code (HTML) means you can easily make content changes in the future without affecting the page styling, and vice versa.

HTML Align Text Center

Aligning text along the center axis is common on websites. However, while it makes the page look organized and symmetrical, centering everything on the page can be boring. Plus, centering large paragraphs of text can make reading more difficult.

Therefore, center alignment should be saved for titles, block quotes, call-to-action buttons, and other elements that disrupt the flow of the document to grab the reader’s attention.

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

Image Source

Let’s say I’m building a web page and I want to center my heading, but keep everything else left-aligned. I can use the rule text-align: center on the headings to achieve this:

See the Pen text-align: center 1 by Christina Perricone (@hubspot) on CodePen.

Now, let’s say I want to center a button element on the page. Since the HTML button is an inline element, not a block-level element, the text-align property cannot be used directly on the button to center it. Instead, we can place the button inside a div, the generic block-level element, then apply text-align: center to this div container:

See the Pen text-align: center 2 by Christina Perricone (@hubspot) on CodePen.

Need a visual? This video explains all of these steps in more detail.

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. (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 starts each new line of text. Right and center alignment, on the contrary, create a jagged edge that requires the reader to start each new line of text at a slightly different point. This slows the reading process.

Try reading the following paragraphs to see which alignment makes the paragraph easiest to read. If you’re like most English readers, you’ll prefer left alignment.

HTML aligns content to the left by default, so in many cases you won’t need to use the text-align property to achieve this effect.

See the Pen text-align: left 1 by Christina Perricone (@hubspot) on CodePen.

However, you may encounter situations when you want to left-align a piece of content that is inside an element set to a different alignment, like right or center. So, it’s still good to know how.

To left justify in CSS, use the CSS rule text-align: left. In the example below, the div element is set to center all content inside it. However, when we apply text-align: left to the second paragraph, this overrides the div’s styling:

See the Pen text-align: left 2 by Christina Perricone (@hubspot) on CodePen.

HTML Align Text Right

Aligning text against the right-side margin is the least common alignment type since it conflicts with how most people read text. Though it requires more effort to read, right-justified text — when used strategically — can 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:

Image Source

Let’s say we want to right-align all headings on the page. We can apply the CSS rule text-align: right to all H2s to right justify them:

See the Pen text-align: right by Christina Perricone (@hubspot) on CodePen.

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. Just make sure that, in the end, your alignments serve the reading experience.

Editor's note: This post was originally published in August 2020 and has been updated for comprehensiveness.

Which text is aligned to both left and right?

In which alignment text is arranged from left to right?