過去バージョン

text-align プロパティとは

text-align はブロックコンテナ内のインラインコンテンツ (テキスト、インライン要素、インラインブロック要素) の水平方向の揃えを指定する CSS プロパティです。

初学者がよく誤解するのは「div のようなブロック要素自体を中央寄せにする」用途では使えないこと。ブロック要素の中央寄せは margin: 0 auto や flexbox を使います。

値の一覧

基本例

.left   { text-align: left;   }
.right  { text-align: right;  }
.center { text-align: center; }
.justify{ text-align: justify;}

左揃え (デフォルト)。コンテンツが左から始まる。
右揃え。右端に揃う。
中央揃え。中央に配置される。

    両端揃え。行末を強制的に右端に揃えるために、
    単語間隔がブラウザによって自動調整される。
    最終行は左揃え (justify-all を使えば最終行も両端揃え)。

論理プロパティ (start / end)

多言語サイトでは start / end が便利。LTR (英語 / 日本語) と RTL (アラビア語 / ヘブライ語) で自動的に向きが切り替わる。

/* 単方向の場合の差 */
.a { text-align: left;  }    /* LTR でも RTL でも常に左 */
.b { text-align: start; }    /* LTR では左、RTL では右 */

/* 多言語対応サイトでの推奨 */
body { text-align: start; }

justify (両端揃え) の使いどころ

新聞や本のような段組みレイアウトで好まれる仕上がり。ただし日本語では単語境界の判定が難しく、不自然な空白ができることがあります。

.article-body {
    text-align: justify;
    text-justify: inter-character;   /* 日本語向けの調整 */
    word-break: normal;
    hyphens: auto;                   /* 英文ならハイフネーション併用 */
}

影響を受けるもの / 受けないもの

定番パターン

1. 見出しを中央寄せ

.section-title {
    text-align: center;
    font-size: 24px;
    margin: 2em 0;
}

2. テーブルセルの揃え

td        { text-align: left; }   /* デフォルトの確認 */
td.amount { text-align: right; }  /* 金額は右揃え */
td.center { text-align: center; } /* ステータスなど */

3. 画像を中央寄せ (インラインブロックの場合)

.image-wrapper {
    text-align: center;
}
.image-wrapper img {
    display: inline-block;   /* 通常 img はインラインなのでそのままでも OK */
}

4. ブロック要素を中央寄せ (text-align ではない)

.block {
    width: 600px;
    margin: 0 auto;          /* ブロック要素は margin auto */
}

.flex-parent {
    display: flex;
    justify-content: center; /* flexbox なら justify-content */
}

継承

text-align は継承されるプロパティ。親に指定すれば子のインラインコンテンツに伝播します。

body { text-align: left; }       /* 全体は左揃え */

.center-area { text-align: center; }
/* この中の p / h2 / a / span などは中央揃え */

FAQ

Q: div 自体を中央寄せにしたいが効かない
A: text-align: center はインラインコンテンツ用。div 自体には margin: 0 auto、または親側で flexbox / grid を使う。

Q: justify で日本語が不自然
A: 日本語の両端揃えは文字間隔を均等に詰めるのが自然。text-justify: inter-character; を併用するか、そもそも justify を使わず start にする選択肢もあり。

Q: left と start どちらを使うべき？
A: 多言語対応の予定があれば start。LTR 言語のみなら left でも問題なし。

Q: 揃えが効かないことがある
A: 対象がインラインコンテンツでない (子もブロック要素ばかり) と影響しない。子に display: inline-block をかけるか、親で flexbox を使う。

継承とリセット

text-align は継承プロパティのため、深い階層で意図しない値を引きずってしまうことがあります。リセットしたい場合は明示的に初期値を入れます。

/* 明示的リセット */
.reset-text-align {
    text-align: start;          /* デフォルトに戻す (論理プロパティ) */
}

/* 全テーブルの数値セルだけ右寄せ */
table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;   /* 数字幅も揃える */
}

RTL 言語 (アラビア語など) との対応

RTL では文章が右から左に流れます。direction: rtl; を設定すると、start が右、end が左を指すようになります。

    
這是阿拉伯文範例 (右側對齊)
    
這是 end (左側對齊)

vertical-align との混同に注意

text-align は水平方向のみ。垂直方向は vertical-align (インラインボックスのベースライン揃え) で扱います。混同しないこと。

関連プロパティ

• fontプロパティ — フォントの一括指定
• text-justify — justify 時の調整方法
• vertical-align — 縦方向の揃え
• justify-content / justify-items — flex / grid での揃え