text-align

style.css

/* left: 左揃え（デフォルト） */
p.test { text-align: left;}

/* right: 右揃え */
p.test2 { text-align: right;}

/* center: 中央揃え */
p.test3 { text-align: center;}

/* justify: 両端揃え（英文などで均等割り付け） */
p.test4 { text-align: justify;}

/* ブロック要素をtext-align: centerで中央に見せる（一般的な誤解に注意） */
.container { text-align: center;} /* 内部のインライン要素が中央揃えになる */

/* ナビゲーションのリンクを右揃えにする */
nav { text-align: right;}

/* ヘッダーのロゴを左、メニューを右に */
.header-left { text-align: left;}
.header-right { text-align: right;}

<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>