スタイルシートtext-align

text-align

スタイルシート属性text-alignは、ブロック要素に含まれるインライン要素の揃え方を指定することができる。

デフォルト値 directionプロパティの値が"ltr"の場合は"left"
directionプロパティの値が"rtl"の場合は"right"
適用対象 ブロックレベル要素、インラインブロック要素、テーブルのセル
アニメーションの可否 不可
バージョン CSS1
JavaScript object.style.textAlign

書式

text-align: align

属性値

align
テキストの並びの揃え方を指定します。
align属性
値 意味
left 左端揃え（規定値）
center 中央揃え
right 右端揃え
justify 両端揃え
inherit 継承
スタイルシート属性text-alignの属性値としてjustifyを指定した場合、スタイルシート属性text-justifyでさらにテキストの揃え方を細かく指定することができます。

使用例

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

<p style="text-align:left">左寄せ</p>

左寄せ

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

中央揃え

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

右寄せ

<p style="text-align:justify">text-align is justify</p>

text-align is justify

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>

Internet Explorerの場合、ブロック要素にも影響が及ぶ。他のWebブラウザではブロック要素に影響は及ばない。

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

text-justify

スタイルシート属性text-justifyは、単語間や文字間のスペースの調整の仕方を指定します。 通常、スタイルシート属性 text-align: justify; と組み合わせて使用します。

書式

text-justify: type

属性値

type
単語間や文字間のスペースの調整の仕方を指定する。
type属性
値 意味
auto 自動（規定値）
newspaper 英文
inter-word 単語間のみによる調整
distribute-all-lines 最後の行も調整
inter-ideograph 単語間と文字間
inter-cluster アジア言語向き
distribute タイ語向き
kashida アラビア語向き

対応状況

現在のところ、Webブラウザが対応しているのはautoとinter-word、noneだけである。これらはすべて表示上の違いはない。

例

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

<p style="width: 300px; text-align: justify; text-justify: auto;">
We hold these truths to be self-evident,
that all men are created equal,
that they are endowed by their Creator with certain unalienable Rights,
that among these are Life, Liberty and the pursuit of Happiness.
</p>

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.

<p style="width: 300px; text-align: justify; text-justify: inter-word;">
We hold these truths to be self-evident,
that all men are created equal,
that they are endowed by their Creator with certain unalienable Rights,
that among these are Life, Liberty and the pursuit of Happiness.
</p>

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.

<p style="width: 300px; text-align: justify; text-justify: none;">
We hold these truths to be self-evident,
that all men are created equal,
that they are endowed by their Creator with certain unalienable Rights,
that among these are Life, Liberty and the pursuit of Happiness.
</p>

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.

text-indent

スタイルシート属性text-indentは、テキストのインデント（字下げ）を指定します。

ブロック要素、表のセルおよびインライン要素に対して指定可能。

書式

text-indent: indent

属性値

indent にはテキストのインデント（字下げ）幅を指定します。1emのように数値と単位で指定するか、次の値から指定します。

indent
値 意味
inherit 継承

使用例と表示サンプル

<p style="text-indent: 100px">indent text</p>

indent text

<p style="text-indent: 3em">indent text</p>

indent text

<p style="text-indent: 50%">indent text</p>

indent text

<p style="text-indent: inherit">indent text</p>

indent text

vertical-align

vertical-alignはテキストの縦方向の位置を指定するスタイルシート属性である。

書式

vertical-align: align

属性値

align
テキストの縦方向の位置を次の値の中から指定する。
値 意味
baseline ベースライン(xの下端を基準とした線)
middle 中央合わせ
sub 下付き文字
super 上付き文字
text-top テキストの上限合わせ
text-bottom テキストの下限合わせ(yの下端を基準とした線)
top 上端
bottom 下端
inherit 継承
length baselineからの相対位置(上方向)
percentage line-height属性に対するパーセンテージ

プロパティ詳細

デフォルト値 baseline
適用対象 インラインレベル要素及びテーブルセル要素
継承 しない
バージョン CSS1
JavaScript object.style.verticalAlign

使用例

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

<div style="font-size:xx-large;">
<span style="vertical-align:baseline;">baseline</span>
<span style="vertical-align:middle;">middle</span>
<span style="vertical-align:sub;">sub</span>
<span style="vertical-align:super;">super</span>
<span style="vertical-align:text-top;">text-top</span>
<span style="vertical-align:text-bottom;">text-bottom</span>
<span style="vertical-align:top;">top</span>
<span style="vertical-align:bottom;">bottom</span>
</div>

上記HTMLの出力は次のとおり。

baseline middle sub super text-top text-bottom top bottom

vertical-alignに長さとパーセンテージを指定した例を示す。

<div style="font-size:xx-large;">
<span style="vertical-align:baseline;">baseline</span>
<span style="vertical-align:1em;">1em</span>
<span style="vertical-align:-1em;">-1em</span>
<span style="vertical-align:100%;">100%</span>
<span style="vertical-align:-100%;">-100%</span>
</div>

上記HTMLの出力は次のとおり。

baseline 1em -1em 100% -100%

表示結果はWebブラウザにより異なることがある。