text-align

text-align CSS プロパティは、テキストのようなインラインコンテンツが、その親ブロックの中でどのように文字寄せされるのかを定義します。text-align が制御するのはそのインラインコンテンツだけで、ブロック要素の配置は制御しません。

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

構文

/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* Block alignment values (Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;

/* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;

The text-align property is specified as a single keyword chosen from the list of values below.

値

start

文章の方向が左から右であれば left と、右から左であれば right と同じです。

end

文章の方向が左から右であれば right と、右から左であれば left と同じです。

left

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

right

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

center

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

justify

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

justify-all

justify と同じですが、最終行も強制的に両端揃えされます。

match-parent

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

形式文法

start | end | left | right | center | justify | match-parent

例

Left alignment

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

.example {
  text-align: left;
  border: solid;
}

Result

Centered text

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

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

Result

Justify

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

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

Result

Notes

The standard-compatible way to center a block itself without centering its inline content is setting the left and right margin to auto, e.g.:

.something {
  margin: auto;
}

.something {
  margin: 0 auto;
}

.something {
  margin-left: auto;
  margin-right: auto;
}

仕様書

ブラウザー実装状況

関連情報

• margin:auto、margin-left:auto、vertical-align