text-align【テキスト配置】

メモ 構文 例 関連

メモ

  • テキスト配置

構文 (※記述方法)

プロパティ値
text-align:    start【文書方向の開始位置に揃え】
| end【文書方向の終了位置に揃え】
| left【左揃え】
| right【右揃え】
| center【中央揃え】
| justify【両端揃え】
| match-parent【親要素の文書方向を継承】

例

<div style="border:thin blue solid; width:50%;">
  <div style="text-align:start; direction:ltr;">start-ltr</div>
  <div style="text-align:end; direction:ltr;">end-ltr</div>
  <div style="text-align:start; direction:rtl;">start-rtl</div>
  <div style="text-align:end; direction:rtl;">end-rtl</div>
  <div style="text-align:left;">left</div>
  <div style="text-align:right;">right</div>
  <div style="text-align:center;">center</div>
  <div>【指定なし】～</div>
  <div style="text-align:justify;">【justify】～</div>
  <div style="direction:ltr;"><div style="text-align:match-parent;">match-parent-ltr</div></div>
  <div style="direction:rtl;"><div style="text-align:match-parent;">match-parent-rtl</div></div>
</div>

start-ltr
end-ltr
start-rtl
end-rtl
left
right
center
【指定なし】The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
【justify】The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
match-parent-ltr
match-parent-rtl