text-align

CSS の text-align は、HTML のインライン要素およびテキストに対して、水平方向の揃え方を指定するプロパティである。

書式

text-align: align

属性

text-align プロパティには次に示す属性を指定することができる。

align
テキストの並びの揃え方を指定します。
align属性
値 意味
left 左端揃え（規定値）
center 中央揃え
right 右端揃え
justify 両端揃え
inherit 継承

left

text-align プロパティに left を指定すると、テキストが左に寄せられて、行頭が揃えられる。日本語の横書きや英語では、テキストは左寄せにするのが一般的である。一般的な体裁であるため、初期値となっている。

<p style="text-align: left">
  In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with
  the ends of worms and an oozy smell, not yet a dry, bare, sandy hole with nothing in it
  to site down on or to eat: it was a hobbit-hole, and that means comfort.
</p>

In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, not yet a dry, bare, sandy hole with nothing in it to site down on or to eat: it was a hobbit-hole, and that means comfort.

スタイルシート属性text-alignの属性値としてjustifyを指定した場合、スタイルシート属性text-justifyでさらにテキストの揃え方を細かく指定することができます。

right

<p style="text-align:right">右寄せ</p>

右寄せ

center

text-align プロパティに center を指定すると、テキストが中央に揃えられる。中央揃えは英語の詩やレストランのメニューによく使われる体裁である。

<p style="text-align:center">
  Hey diddle, diddle!<br>
  The cat and the fiddle,<br>
  The cow jumped over the moon;<br>
  The little dog laughed<br>
  To see such sport,<br>
  And the dish ran away with the spoon.
</p>

Hey diddle, diddle!
The cat and the fiddle,
The cow jumped over the moon;
The little dog laughed
To see such sport,
And the dish ran away with the spoon.

justify

text-align プロパティに justify を指定すると、テキストの両端が揃えられる。これは英文でよく使われる体裁で、行頭と行末の両端を揃えるために単語の間隔が調整される。

テキストの揃え方は、text-justify プロパティで細かく指定できる。

<p style="text-align: justify; width: 300px">
  In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with
  the ends of worms and an oozy smell, not yet a dry, bare, sandy hole with nothing in it
  to site down on or to eat: it was a hobbit-hole, and that means comfort.
</p>

In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, not yet a dry, bare, sandy hole with nothing in it to site down on or to eat: it was a hobbit-hole, and that means comfort.

初期値

text-align プロパティの初期値は、direction プロパティの値によって異なる。

text-alignの初期値
directionの値 text-alignの初期値
ltr left
rtl right

使用例

次にスタイルシート属性 text-alignを使用したHTMLの例を示します。

span要素はインライン要素なので、text-alignスタイルシートプロパティの影響が及ぶ。

<div style="text-align: center">
  <span>中央揃え</span>
</div>
中央揃え

img要素はインライン要素なので、text-alignスタイルシートプロパティの影響が及ぶ。

<div style="text-align: center">
  <img src="/html/img/button.png">
</div>
button

text-align が効かない要素

CSS の text-align プロパティは、ブロック要素には効かない。

div はブロック要素なので、text-align プロパティは効かない。ただし、ブロック要素内のテキストやインライン要素には効く。

<div style="text-align: center">
  <div style="border: 1px solid; width: 200px">div</div>
</div>
div

pre はブロック要素なので、text-align プロパティは効かない。ただし、ブロック要素内のテキストやインライン要素には効く。

<div style="text-align: center">
  <pre style="border: 1px solid; width: 200px"">pre</pre>
</div>
pre

address はブロック要素なので、text-align プロパティは効かない。ただし、ブロック要素内のテキストやインライン要素には効く。

<div style="text-align: center">
  <address style="border: 1px solid; width: 200px"">address</address>
</div>
address

ul はブロック要素なので、text-align プロパティは効かない。ただし、ブロック要素内のテキストやインライン要素には効く。

<div style="text-align: center">
  <ul style="border: 1px solid; width: 200px">
    <li>list</li>
  </ul>
</div>

JavaScript

CSS の text-indent プロパティを JavaScript から 参照又は変更するには、エレメント・オブジェクトの style.textAlign プロパティを使う。

JavaScript から text-align プロパティを変更する例を以下に示す。

<p>text-align:
  <select id="ta">
    <option>left</option>
    <option>center</option>
    <option>right</option>
  </select>
</p>
<p id="ex">The quick brown fox jumps over the lazy dog.</p>
<script>
  document.getElementById("ta").addEventListener("change", function(evt){
    document.getElementById("ex").style.textAlign = evt.target.value;
  });
</script>

上記の HTML は以下のように表示される。

text-align:

The quick brown fox jumps over the lazy dog.

関連記事

参考文献

World Wide Web Consortium (2023) CSS Text Module Level 3