text-align

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

text-align は CSS のプロパティで、ブロック要素または表のセルボックス内におけるインラインレベルコンテンツの水平方向の配置を設定します。つまり、 vertical-align と同じように機能しますが、水平方向に機能します。

試してみましょう

text-align: start;

text-align: end;

text-align: center;

text-align: justify;

<section id="default-example">
  <div id="example-element">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </p>
  </div>
</section>

section {
  font-size: 1.5em;
}

#default-example > div {
  width: 250px;
}

構文

css
/* キーワード値 */
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: match-parent;

/* ブロック配置の値 (標準外の構文) */
text-align: -moz-center;
text-align: -webkit-center;

/* グローバル値 */
text-align: inherit;
text-align: initial;
text-align: revert;
text-align: revert-layer;
text-align: unset;

text-align プロパティは、以下のいずれかの方法で指定します。

値

start

書字方向が左から右の場合は left、右から左の場合は right と同じです。

end

書字方向が左から右の場合は right、右から左の場合は left と同じです。

left

インラインコンテンツはラインボックスの左辺に寄せられます。

インラインコンテンツはラインボックスの右辺に寄せられます。

center

インラインコンテンツはラインボックス内で中央に寄せられます。

justify

インラインコンテンツは両端揃えになります。テキストは最終行を除いて、その左右の端がラインボックスの左右の端に揃うように間隔が空けられます。

match-parent

inherit と似ていますが、start と end の値は親要素の direction に従って計算されて、適切な left もしくは right の値で置き換えられます。

アクセシビリティ

両端揃えによって生じる単語間の一貫性のない間隔は、ディスレクシアなどの認知的な懸念を持つ人々にとって問題となる可能性があります。

公式定義

初期値start。start に対応していないブラウザーでは、書字方向が ltr なら left、rtl なら right として動作する無名の値
適用対象ブロックコンテナー
継承あり
計算値指定値。ただし match-parent 値を除く。この値は親要素の direction の値に基いて計算され、計算値が left または right のどちらかになる
アニメーションの種類離散値

形式文法

text-align = 
  start         |
  end           |
  left          |
  right         |
  center        |
  justify       |
  match-parent  |
  justify-all

例

先頭へ配置

HTML

html
<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

css
.example {
  text-align: start;
  border: solid;
}

結果

中央揃え

HTML

html
<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

css
.example {
  text-align: center;
  border: solid;
}

結果

"justify" を使用した例

HTML

html
<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

css
.example {
  text-align: justify;
  border: solid;
}

結果

表の配置

この例は、 text-align を <table> 要素に使用したデモです。

  • <caption> は右揃えに設定されています。
  • 最初の 2 つの <th> 要素は、 <thead> に設定された text-align: left から左揃えを継承していますが、3 番目は右揃えに設定されています。
  • <tbody> 要素の中では、最初の行は右揃えに設定されており、 2 行目は中央ぞろえ、 3 行目は既定値（左揃え）を設定しています。
  • それぞれの行の中で、一部のセル (c12, c31) は行による配置をオーバーライドしています。

HTML

html
<table>
  <caption>
    表の例
  </caption>
  <thead>
    <tr>
      <th>列 1</th>
      <th>列 2</th>
      <th class="right">列 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="right">
      <td>11</td>
      <td class="center">12</td>
      <td>13</td>
    </tr>
    <tr class="center">
      <td>21</td>
      <td>22</td>
      <td>23</td>
    </tr>
    <tr id="r3">
      <td class="right">31</td>
      <td>32</td>
      <td>33</td>
    </tr>
  </tbody>
</table>

CSS

css
table {
  border-collapse: collapse;
  border: solid black 1px;
  width: 250px;
  height: 150px;
}

thead {
  text-align: left;
}

td,
th {
  border: solid 1px black;
}

.center {
  text-align: center;
}

.right,
caption {
  text-align: right;
}

結果

仕様書

Specification
CSS Logical Properties and Values Level 1
# text-align
CSS Text Module Level 3
# text-align-property

ブラウザーの互換性

関連情報