項 目 | 説 明 |
---|---|
記述形式 | セレクタ {text-align: 値 } |
値 の形式 | [ start,end,left,right,center ] [ 文字列 ] ],justify,match-parent,start end |
初 期 値 | start |
対応ブラウザー | C1+ / e3+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
適用可能な要素 | ブロック・コンテナ |
継 承 | する |
text-alignプロパティ は,テキストの行揃えの指定です。
指定できる値の形式は,以下のとおりです。
値 | 説 明 |
---|---|
start | 行の開始端揃えにします。 |
end | 行の終了端揃えにします。 |
left | 左揃えにします。 |
right | 右揃えにします。 |
center | 中央揃えにします。 |
justify | 均等割付にします。 |
文字列 | 揃える基準となる文字を1文字で指定します。 2文字以上指定すると無視されます。 |
match-parent | inherit(継承)と同様の機能ですが,継承された start,end の両キーワードの値は親要素の direction の指定には従わず,順に,左 と 右 に配置します。 |
start end | 1行目と強制改行後の先頭位置について start による揃えを適用します。 その他の行の終端揃え text-align-last の指定には従いません。 |
text-alignプロパティ は,テキストに対する指定ですので,表(テーブル)や 画像(<img>)などの全体の配置には使用できません。 これらの配置の際には,floatプロパティ や marginプロパティ(margin-leftプロパティ,margin-rightプロパティ)を使用します。
HTML5 では,text-align プロパティ の機能は大幅に拡張されていますが,まだ,対応しているブラウザーは少ないようです。
なお,HTML5 では,align属性 や valign属性 は廃止になり使用できませんので,注意してください。
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行目 |
文字列による指定の例です。
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> |
ブラウザー 表示例 (未対応のブラウザーでは正しく表示されません) | |||||||||
---|---|---|---|---|---|---|---|---|---|
|