CSS ・ 文字・フォント
text-align
行揃え
ブロック要素の中で、文字やインライン要素を左・中央・右のどこに揃えるかを指定します。
01
サンプルコード
HTML
1<p class="left">左揃え（start）</p>
2<p class="center">中央揃え（center）</p>
3<p class="right">右揃え（end）</p>
CSS
1p {
2 padding: 6px;
3 background: #f5efe6;
4}
5.left {
6 text-align: start;
7}
8.center {
9 text-align: center;
10}
11.right {
12 text-align: end;
13}
02
実行結果
ブラウザでの表示
03
解説
text-align は、ブロックの中で文字などのインライン要素をどう揃えるかを指定します。指定するのは、揃えたい文字の「親のブロック要素」です。
start・end は文章の書き始め・書き終わりの方向を意味します。日本語や英語では start が左、end が右です。
text-align が動かすのは中身の文字だけで、ブロック要素そのものは動きません。ブロック自体を中央に置くには margin: 0 auto などを使います。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
start / left | 左揃え |
center | 中央揃え |
end / right | 右揃え |
justify | 両端揃え（最後の行を除く） |
画像やボタンを中央に置く
インライン要素の img や inline-block のボタンも text-align で揃えられます。
HTML
1<div class="center">
2 <a class="btn" href="#">お問い合わせ</a>
3</div>
CSS
1.center {
2 text-align: center;
3}
4.btn {
5 display: inline-block;
6}
注意点
- 01長い文章を中央揃えにすると、行頭がそろわず読みにくくなります。
- 02ブロック要素そのものを中央に寄せたいときは、margin や Flexbox を使います。