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;">ここはp要素です。</p>

<p style="border: solid 1px black; text-align: right;">ここはp要素です。</p>

<p style="border: solid 1px black; text-align: center;">ここはp要素です。</p>

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

全バージョンで対応しています

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

3.5 以降 ○

2 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN に基づいています。

インラインレベル要素などのインラインコンテンツを文字寄せしたい場合の位置を指定します。

文字寄せ位置の指定が可能なのはインラインレベル要素(span要素やimg要素等)などのインラインコンテンツのみとなりますのでご注意ください。ブロックレベル要素やtable要素などの位置寄せを行いたい、といった場合には『margin』プロパティを使用して下さい。

<div style="border: solid 1px black; text-align: center;">
	<p style="background-color: yellow; width: 300px; margin: 0;">ここは横幅300pxと指定しているp要素です。親のdiv要素に『text-align: center』と指定していますが、このp要素はブロックレベル要素なので中央寄せとなりません。ただし、p要素の中にいるこの文章はインラインコンテンツなので中央寄せで表示されます。</p>
</div>

<div style="border: solid 1px black;">
	<p style="background-color: yellow; width: 300px; margin: 0 auto;">ここは横幅300pxと指定しているp要素です。p要素に『margin: 0 auto;』と指定して中央寄せにしています。</p>
</div>