How to align text on a web page in HTML or CSS

Updated: 08/03/2018 by Computer Hope
text alignment

Any text can be aligned to the left, center, or right on a web page. Images can also be aligned on a web page the same way as text. Below are examples of how to left, tab, center, and right-align text and images.

Tip

If any of your text alignment is not working, make sure other CSS styles applied to the element, or a containing element, aren't conflicting with the justification you're trying to set.

Note

With these examples and most alignment, the text is aligned in the element containing the text. Text can be centered in an HTML div and be left-aligned on the rest of the web page. Also, anything contained in the tag containing the CSS justification (e.g., an image) is also aligned.

Examples of alignment

Left-aligned

Tab aligned

Center-aligned

Right-aligned

Left-aligned example

By default, English and other languages align the text to the left. However, if the element containing the text or image is right-aligned or you need to change the text or image alignment, the below code can be added to your element or into CSS.

HTML code

<p style="text-align: left;">Left-aligned</p>
<p style="text-align: left;"><img src="example.jpg"></p>
Tip

See the below additional tips for adjusting the alignment, padding, and margin of an element.

Tab aligned example

Although there is not a "tab" text-alignment, a left-margin can be added to an element for the appearance of a tab alignment, as shown below.

HTML code

<p style="margin-left: 2.5em;">Tab aligned</p>
<p style="margin-left: 2.5em;"><img src="example.jpg"></p>
Tip

See the below additional tips for adjusting the alignment, padding, and margin of an element.

Center-aligned example

Using the text-align attribute, you can center any text or image in an element, as shown in the example below.

HTML code

<p style="text-align: center;">Center-aligned</p>
<p style="text-align: center;"><img src="example.jpg"></p>
Tip

See the below additional tips for adjusting the alignment, padding, and margin of an element.

Right-aligned example

Using the text-align attribute, you can center any text or image in an element, as shown in the example below.

HTML code

<p style="text-align: right;">Right-aligned</p>
<p style="text-align: right;"><img src="example.jpg"></p>
Tip

Alternatively, you can use CSS to right-align an image on a web page.

Tip

See the below additional tips for adjusting the alignment, padding, and margin of an element.

Additional alignment tips

Below are additional alignment tips that can be applied to any of the above style rules or other CSS classes.

  1. An additional margin can be added to any of the above styles if you require additional indentation or want more padding. For example, you could apply a margin-right to the right-aligned example to move the text further into the element.
  2. If you want a more responsive page, make sure to adjust or remove any left or right justification when viewed on a smaller screen.