備忘録的プログラミングリファレンス

text-alignプロパティ

 text-alignプロパティは、コンテンツの水平方向の配置、左寄せ、中央寄せ、右寄せを指定するプロパティです。

 垂直方向の配置を指定するには、vertical-alignプロパティを使います。

 text-alignプロパティ、主にテキストの配置位置の指定方法です。エレメント自体の配置を変更したい場合は、block要素にして、positionプロパティと、topbottomleftrightプロパティを組み合わせた方がよいでしょう。

コンテンツを中央に配置
text-align: center;

関連プロパティ

 以下はテキスト配置に関連するプロパティです。

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-wrapoverflow-wrapプロパティの別名

構文(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 AnimationNo

Example

 text-alignの例です。エレメント内のコンテンツが中央に配置されます。
 エレメント自体は中央に寄りません。以下の例では、id="contents"のエレメントの親エレメントで中央寄りに指定していますが、エレメント自体は左に寄っています。エレメントはpositionプロパティで配置を指定する必要があります。