text-align

p.test { text-align: left;}
p.test1 { text-align: right;}
p.test2 { text-align: center;}

<p style="border: solid 1px black; text-align: left;">This is a p element.</p>

<p style="border: solid 1px black; text-align: right;">This is a p element.</p>

<p style="border: solid 1px black; text-align: center;">This is a p element.</p>

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

Supported in all versions

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

3.5+ ○

2 and earlier ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data is based on MDN.

Specifies the alignment position for inline content such as inline-level elements.

Note that alignment can only be applied to inline content such as inline-level elements (span, img, etc.). To position block-level elements or table elements, use the 'margin' property instead.

<div style="border: solid 1px black; text-align: center;">
	<p style="background-color: yellow; width: 300px; margin: 0;">This is a p element with a width of 300px. Although 'text-align: center' is specified on the parent div element, this p element is a block-level element so it is not centered. However, this text inside the p element is inline content, so it is displayed centered.</p>
</div>

<div style="border: solid 1px black;">
	<p style="background-color: yellow; width: 300px; margin: 0 auto;">This is a p element with a width of 300px. 'margin: 0 auto' is specified on the p element to center it.</p>
</div>