text-align:ボックスに含まれる内容の横位置の揃え方を指定する

初期値 start。対応していない場合は書字方向の値に従う
適用対象 ブロックコンテナ
継承 する
アニメーション 離散値
対応ブラウザ caniuseで確認

text-alignプロパティの説明

text-alignは、ブロック要素やテーブルセルに含まれる内容の横位置の揃え方を指定します。一般的にはテキストや画像などのインライン要素を左、右、中央に寄せるために使用します。

配置の指定は、leftrightのように直感的なものから、startendのようにボックスの書字方向に影響を受けるものがあります。通常の英文や日本語は左から右へ流れる横書きのため意識しませんが、既定値のstartは書字方向の影響を受けるという点を理解しておきましょう。

また、text-align-lastプロパティを併用することで、ブラウザが自動的に折り返した最後の行も寄せる位置を指定できます。

text-alignに指定できる値

start
書字方向が左書きであればleft、右書きであればrightと同じ方向に寄せます。これが初期値です。
end
書字方向が左書きであればright、右書きであればleftと同じ方向に寄せます。
left
インライン要素は行方向の左に寄せて配置されます。
right
インライン要素は行方向の右に寄せて配置されます。
center
インライン要素は行方向の中央に寄せて配置されます。
justify
インライン要素は行方向の両端に揃えて配置されます。最終行を除くテキストは、均等の隙間を空けて等間隔で並びます。最終行を行端揃えにしたい場合は、text-align-lastを併記します。
justify-all(β)
インライン要素は行方向の両端に揃えて配置されます。最終行を含む全てのテキストが行端揃えとなります。
match-parent
親要素のdirectionに従ってstartendの値が計算され、適切なleftまたはright値に置き換えられます。
<string>(β)
表のセルに配置されたコンテンツの揃える位置揃え文字を指定します。

text-alignの使い方とサンプル

text-alignプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: match-parent;

/* 表の列における文字ベースの配置 */
text-align: "・";
text-align: "・" center;

/* グローバル値 */
text-align: inherit;
text-align: initial;
text-align: revert;
text-align: unset;

text-alignの実例

それでは実際にtext-alignプロパティの書き方を見ていきましょう。以下の例は、text-alignの値を変えたボックスに、テキストを配置した場合の挙動です。それぞれの値に従って左右や中央に文字が寄っているのが分かります。

細かい挙動を見ていくと、書字方向を指定するdirectionの設定によって、テキストを寄せる方向が変わる値があります。resizeに対応しているブラウザであれば、各セクションの幅を変更できます。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box > section {
	overflow: auto;
	margin: 1rem 0 0;
	padding: 0 1rem 1rem;
	background: #fff;
	resize: horizontal;
}
section > h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
section > p {
	margin: 1rem 0 0;
}
.ta_start {
	text-align: start;
}
.ta_end {
	text-align: end;
}
.ta_left {
	text-align: left;
}
.ta_right {
	text-align: right;
}
.ta_center {
	text-align: center;
}
.ta_justify {
	text-align: justify;
}
.ta_justifyall {
	text-align: justify-all;
}
.ta_mp {
	text-align: match-parent;
}
HTML
<div class="samp_box">
	<section class="ta_start">
		<h2>text-align: start;</h2>
		<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890.</p>
	</section>
	<section class="ta_end">
		<h2>text-align: end;</h2>
		<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890.</p>
	</section>
	<section class="ta_left">
		<h2>text-align: left;</h2>
		<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890.</p>
	</section>
	<section class="ta_right">
		<h2>text-align: right;</h2>
		<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890.</p>
	</section>
	<section class="ta_center">
		<h2>text-align: center;</h2>
		<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890.</p>
	</section>
	<section class="ta_justify">
		<h2>text-align: justify;</h2>
		<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890.</p>
	</section>
	<section class="ta_justify">
		<h2>text-align: justify-all;</h2>
		<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890.</p>
	</section>
	<section class="ta_mp">
		<h2>text-align: match-parent;</h2>
		<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890.</p>
	</section>
</div>

text-alignに関連するCSSプロパティ

テキスト関連
text-align ボックスに含まれる内容の横位置の揃え方を指定する
text-align-last ボックスに含まれる内容の最後の行を揃える位置を指定する
text-combine-upright 一文字分の空間に挿入する文字の組み合わせを指定する
text-decoration 文字の装飾線に関する値を一括で指定する
text-decoration-color 文字に加えられた装飾線の色を指定する
text-decoration-line 文字に加えられた装飾線の種類を指定する
text-decoration-skip-ink 装飾線が文字を通過する祭の処理を指定する
text-decoration-style 文字に加えられた装飾線の形状を指定する
text-decoration-thickness 文字に加えられた装飾線の太さを指定する
text-emphasis テキストに付加する圏点、傍点、脇点に関する値を一括で指定する
text-emphasis-color テキストに付加する圏点、傍点、脇点の色を指定する
text-emphasis-position テキストに付加する圏点、傍点、脇点の位置を指定する
text-emphasis-style テキストに付加する圏点、傍点、脇点の記号を指定する
text-indent テキストの一行目に挿入するインデントの幅を指定する
text-justify テキストの行端揃えに対して均等割り付けの方法を指定する
text-orientation 縦書きモードの文字の向きを指定する
text-overflow 行からテキストが溢れている状態の表現方法を指定する
text-shadow 文字に影(ドロップシャドウ)を付ける
text-transform テキストの大文字・小文字の表記を指定する
text-underline-position 文字の下に引かれる装飾線の位置を指定する