CSS3: text-align プロパティ - テキストの左揃え・右揃え・中央揃え

■ 概要

項  目説  明
記述形式 セレクタ {text-align: }
値 の形式 [ startendleftrightcenter ] [ 文字列 ] ],justifymatch-parentstart end
初 期 値 start
対応ブラウザー C1+ / e3+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+
適用可能な要素 ブロック・コンテナ
継  承 する

■ 解説

text-alignプロパティ は,テキストの行揃えの指定です。

指定できる値の形式は,以下のとおりです。

説  明
start 行の開始端揃えにします。
end 行の終了端揃えにします。
left 左揃えにします。
right 右揃えにします。
center 中央揃えにします。
justify 均等割付にします。
文字列 揃える基準となる文字を1文字で指定します。 2文字以上指定すると無視されます。
match-parent inherit(継承)と同様の機能ですが,継承された startend の両キーワードの値は親要素の direction の指定には従わず,順に, に配置します。
start end 1行目と強制改行後の先頭位置について start による揃えを適用します。 その他の行の終端揃え text-align-last の指定には従いません。

text-alignプロパティ は,テキストに対する指定ですので,表(テーブル)や 画像(<img>)などの全体の配置には使用できません。 これらの配置の際には,floatプロパティmarginプロパティmargin-leftプロパティmargin-rightプロパティ)を使用します。

HTML5 では,text-align プロパティ の機能は大幅に拡張されていますが,まだ,対応しているブラウザーは少ないようです。

なお,HTML5 では,align属性valign属性 は廃止になり使用できませんので,注意してください。

■ 使用例( text-alignプロパティの利用1)

HTMLソース
CSS
<head> ~ </head>
<style type="text/css">
<!--
   div.ta0 {text-align: left;}
   div.ta1 {text-align: center;}
   div.ta2 {text-align: right;}
   div.ta3 {text-align: justify;}
-->
</style>
HTML
<body> ~ </body>
<div class="ta0">
  左揃え
  <br>2行目
</div>

<div class="ta1">
  中央揃え
  <br>2行目
</div>

<div class="ta2">
  右揃え
  <br>2行目
</div>     

<div class="ta3">
  均等割付
  <br>2行目
</div>     

ブラウザー 表示例 (justify は未対応のブラウザーでは正しく表示されません)
左揃え
2行目
中央揃え
2行目
右揃え
2行目
均等割付
2行目

■ 使用例( text-alignプロパティの利用2)

文字列による指定の例です。

HTMLソース
CSS
<head> ~ </head>
<style type="text/css">
<!--
   td { text-align: "." center; }
-->
</style>
HTML
<body> ~ </body>
<table>
   <tr> <th>Long distance calls</th></tr>
   <tr> <td> $1.30</td></tr>
   <tr> <td> $2.50</td></tr>
   <tr> <td> $10.80</td></tr>
   <tr> <td> $111.01</td></tr>
   <tr> <td> $85.</td></tr>
   <tr> <td> N/A</td></tr>
   <tr> <td> $.05</td></tr>
   <tr> <td> $.06</td></tr>
</table>

ブラウザー 表示例 (未対応のブラウザーでは正しく表示されません)
Long distance calls
$1.30
$2.50
$10.80
$111.01
$85.
N/A
$.05
$.06

■ 備考

【参考ページ】