text-align プロパティ
text-align プロパティは、コンテンツの水平方向の配置を指定するプロパティで、左寄せ、中央寄せ、右寄せ、均等割つけが指定できます。
text-align: center;
詳しくはExample
を参照してください
均等割付けは、長文の場合は機能します。単語や文字ごとに均等に割り付けられることで両端揃えになります。
エレメントの両端に達しないような短い文字列や単語は両端揃いになりません。
もし、短い文字列や単語を両端揃いにしたい場合は、text-align: justify; と text-align-last を試してください。
垂直方向の配置を指定するには、vertical-alignプロパティを使います。
text-align プロパティ、主にテキストの配置位置の指定方法です。エレメント自体の配置を変更したい場合は、block要素にして、positionプロパティと、top、bottom、left、rightプロパティを組み合わせた方がよいでしょう。
ページ内 Index
構文(Syntax)
CSS
text-align: left | right | center | justify;
DOM ( JavaScript )
String = object.style.textAlign;
object.style.textAlign="left | right | center | justify";
値（Values）
| Value | 摘要 |
|---|---|
| left | 左寄せ |
| right | 右寄せ |
| center | 中央寄せ |
| justify | 均等割り（両端揃え） |
| initial | 初期値に戻す |
| inherit | 親要素（親エレメント）のプロパティを継承 |
備考（Remarks）
| Default value | エレメントによる |
| Inherited（継承） | Yes |
| CSS Animation | No |
Example
text-alignの例です。エレメント内のコンテンツが中央に配置されます。
エレメント自体は中央に寄りません。以下の例では、class="contents"のエレメントの親エレメントで中央寄りに指定していますが、エレメント自体は左に寄っています。エレメントはpositionプロパティで配置を指定する必要があります。
その下の長めの文章は均等割付け（両端揃え）
を確かめるためのものです。上が left 、下が justify （均等割付け）に指定しています。
関連 CSS プロパティ
以下はテキスト配置に関連するプロパティです。
| letter-spacing | 文字間隔 |
| line-height | テキストの行間 |
| overflow-wrap | 単語がエレメント内に入りきらない場合の設定 |
| tab-size | タブのサイズ |
| text-align-last | 最後の行の右寄せ、中央寄せ、左寄せ |
| text-combine-upright | 縦書きにおける算用数字（アラビア数字）の配置 |
| text-indent | 最初の行頭の字下げ幅 |
| text-justify | 両端揃えにおける単語、文字の間隔 |
| text-overflow | エレメントからテキストがはみ出る場合の表記 |
| vertical-align | テキストの上下位置、上付き、下付き |
| white-space | ホワイトスペース（複数の半角スペース、タブ）や改行の表示方法 |
| word-break | エレメントの領域をはみ出るテキストの折り返し |
| word-spacing | 単語と単語の間の空白を調整 |
| word-wrap | overflow-wrapプロパティの別名 |