text-align（テキストの水平配置）プロパティ

最終更新：2026-09-13

text-align text-align（テキストの水平配置）プロパティ

text-align プロパティはブロックレベル要素内のテキストの水平方向の配置を設定します。left、right、center、justify の値をサポートし、段落、見出し、表のセル、その他のブロックコンテナに適用されます。なお text-align は要素内部のコンテンツを揃えるもので、要素自体を揃えるものではありません。

カテゴリ
初期値	start
継承	はい
適用対象	block
アニメーションタイプ	discrete
CSS バージョン	CSS1
状態	標準

📝 構文

text-align: start | end | left | right | center | justify | match-parent;

⚙️ 値

値	タイプ	説明
`start \| end \| left \| right \| center \| justify \| match-parent`	キーワード	テキストの水平方向の配置の値

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
text-align	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： start と end はテキストの方向に応じて左端または右端に解決されるため、多言語サイトには left/right より適しています。

注意： text-align はブロックレベル要素にのみ効果があります。画像などのインライン要素を水平方向に中央揃えするには、親要素に text-align: center を設定してください。

❓ よくある質問

Qtext-align: justify が効かないように見えることがあるのはなぜですか？

A両端揃えは複数行の段落の最終行以外の行にのみ適用されます。テキストが 1 行だけの場合や、その行が段落の最終行の場合、justify は目に見える間隔調整を行いません。

Qtext-align プロパティでテキストを垂直方向に中央揃えできますか？

Aできません。text-align が制御するのは水平方向の配置のみです。垂直方向の中央揃えには line-height、vertical-align、Flexbox、Grid を使ってください。

QCSS でコンテナ内の画像を水平方向に中央揃えするにはどうすればよいですか？

A画像はインライン要素なので、それに margin: auto を指定しても効果がありません。代わりに親コンテナに text-align: center を設定するか、画像を display: block にして margin: 0 auto を使ってください。Flexbox では justify-content: center を使います。