# text-align

> テキストの水平方向の配置を指定するプロパティです。left、right、center、justifyなどの値があり、文章の見た目や読みやすさに大きく影響します。ブロック要素内のテキストやインライン要素に適用されます。

- カテゴリ: テキスト・フォント
- URL: https://www.css-dictionary.com/property/text-align/

## 構文

```css
text-align: left | right | center | justify | start | end
```

## Tailwindでは

- `text-left` → text-align: left
- `text-center` → text-align: center
- `text-right` → text-align: right
- `text-justify` → text-align: justify
- 補足: 書字方向対応の論理値は text-start / text-end。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 1+ / Edge 12+

## コード例

### 例1: 左揃え（デフォルト）

```css
text-align: left;
```

### 例2: 中央揃え

```css
text-align: center;
```

### 例3: 両端揃え

```css
text-align: justify;
```

### 例4: 右揃え

```css
text-align: right;
```

## TIPS

startとendは国際化対応。justifyは英語以外では注意が必要。

## AIがよく間違えるポイント

text-alignが配置するのは「インラインコンテンツ」であり、ブロック要素自体の中央寄せ（margin-inline: auto）とは別物です。この混同はAIにも頻発します。またtext-align: justify（両端揃え）は日本語では約物や英単語の周りで不自然な空きを生みやすく、扱いが難しい指定です。

## AIへの依頼文例

- 「ボックス自体を中央に、その中のテキストは左寄せ」を、text-alignとmargin autoの役割分担で実装して

## 関連プロパティ

- [vertical-align](https://www.css-dictionary.com/property/vertical-align.md)