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.

Examples of alignment

Left-aligned

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.

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.

Tab aligned

Center-aligned

Right-aligned

Left-aligned example

By default, English and other languages align the text to the left. However, if you need to change an elements alignment, the below code can be added to the element or into CSS.

HTML code

Left-aligned

Tab aligned example

Although there’s not a “tab” text-alignment, adding a left-margin gives the appearance of a tab alignment, as shown below.

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

Tab aligned

Center-aligned example

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

Center-aligned

Right-aligned example

Right-aligned

Additional alignment tips

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

Alternatively, you can use CSS to right-align an image on a web page. For more information, see: How to create images that are right-aligned on a web page.

  • 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.
  • If you want a more responsive page, make sure to adjust or remove any left or right justification when viewed on a smaller screen.
  • How to create extra space in HTML or a web page.
  • How to create images that are right-aligned on a web page.
  • How to start in HTML and web design.
  • See our alignment definition for further information and related links.
  • HTML and web design help and support.