How to align text on a web page in HTML or CSS
Any text, like a paragraph, 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.
If any of your text alignment is not working, make sure other CSS (Cascading Style Sheets) 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 (HyperText Markup Language) 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 you need to change an elements alignment, the below code can be added to the element or into CSS.
HTML code
<p style="text-align: left;">Left-aligned</p>
<p style="text-align: left;"><img src="example.jpg"></p>
See the below additional tips for adjusting the alignment, padding, and margin of an element.
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.
HTML code
<p style="margin-left:2.5em;">Tab aligned</p>
<p style="margin-left:2.5em;"><img src="example.jpg"></p>
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>
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>
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.
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.
- 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.