text-align

text-alignは、ブロック要素内のテキストや画像の水平位置（左寄せ・真ん中・右寄せ）の指定に使います。

名前:text-align
値: start | end | left | right | center | justify | match-parent | justify-all
初期値:start
適用対象:block containers（ブロックコンテナ）
継承:する
パーセンテージ:n/a
メディア:visual（視覚的）
計算値:As specified（指定通り）「match-parent」は値参照
正規順序:n/a
アニメーション:discrete（離散的）

Value（値）

start
初期値 文字の開始側に揃える CSS3
end
文字の終了側に揃える CSS3
left
左寄せ。縦書きでは text-orientation 値により上寄せか下寄せになる。
right
右寄せ。縦書きでは text-orientation 値により上寄せか下寄せになる。
center
中央配置（センタリング）
justify
均等割付する。正し、最後の行は text-align-last で指定されていない限り start と同じ扱いになる。（「text-justify」のページを参照）
match-parent
親要素の値を継承する。正し、start / end が継承された場合、親の direction 値により left または right になる。CSS3
justify-all
justifyと同じだが、text-align-last もセットされているので最後の行も強制的に均等割付される CSS3

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { text-align: start; }
   p.test2 { text-align: end; }
   p.test3 { text-align: left; }
   p.test4 { text-align: right; }
   p.test5 { text-align: center; }
   p.test6 { text-align: justify; text-justify: distribute-all-lines; }
   span.test7 { text-align: match-parent; }
   p.test8 { text-align: justify-all; }
  </style>
 </head>
 <body>
   <p class="test1">start</p>
   <p class="test2">end</p>
   <p class="test3">left</p>
   <p class="test4">right</p>
   <p class="test5">center</p>
   <p class="test6">justify justify justify justify</p>
   <p style="text-align: center;">
    <span class="test7">match-parent</span>
   </p>
   <p class="test8">justify justify justify justify</p>
 </body>
</html>

display

start

end

left

right

center

justify justify justify justify justify justify justify justify

match-parent

justify justify justify justify justify justify justify justify

上に戻る