text-align
text-alignプロパティは、テキストをどのように整列させるかを指定します。
右寄せにしたり、中央揃えにしたい場合に活用します。
また、有名なバグの一つで、IE5.xやIE6の互換モードではこのプロパティの値をcenter
にすると、ブロックレベル要素までセンタリングされてしまいます。
本来ブロックレベル要素をセンタリングするにはmargin: 0 auto;
のような指定をする必要が有りますが、IE5.xやIE6の互換モードではセンタリングされないため、ブロックレベル要素のセンタリング目的で使う事も有ります。
- 対応ブラウザ
-
プロパティの解説
- 値
- left|right|center|justify|inherit
- 初期値
- directionプロパティの値に依存
- 適用される要素
- ブロックレベル要素、テーブルのセル要素、インラインブロック要素
- 継承
- します
- パーセント値
- N/A
- メディア
- visual
値の解説
- left
- テキストを左揃えにします
- right
- テキストを右揃えにします
- center
- テキストを中央揃えにします
- justify
- テキストを両端揃えにします
text-alignのサンプル
.item {
width: 480px;
margin: 20px;
padding: 10px 10px 1px;
background: #ccc;
text-align: center;
}
p {
padding: 10px;
text-align: left;
background: #fff;
}
p.leftSample {
text-align: left;
}
p.rightSample {
text-align: right;
}
p.centerSample {
text-align: center;
}
p.justifySample {
text-align: justify;
}
<div class="item">
<p class="leftSample">text-alignのサンプルです。</p>
<p class="rightSample">text-alignのサンプルです。</p>
<p class="centerSample">text-alignのサンプルです。</p>
<p class="justifySample">text-alignのサンプルです。</p>
</div>
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
text-alignのサンプルです。
text-alignのサンプルです。
text-alignのサンプルです。
text-alignのサンプルです。
justifyは1行の時には特に変化が有りません。
複数行になった場合以下のようになります。
- サンプルのブラウザ上の表示
-
こういう部分に必要なサンプルテキストがとっさに浮かばなくて、長文作成だるいよなーとか思っちゃいますね。自由に使えて引用じゃなくて、読まれても特に問題のないテキストって意外と難しい。難しいがゆえに「ダミーテキスト」とか「サンプルテキスト」を繰り返していっぱい並べたりしますよね。でもアレだと見た目が悪かったり実際と印象が違い過ぎたり。まぁそんな時の為に使えるダミーテキストを配布しているサイトなんかも有りますが、そういえば使った事がないなーと思った今日この頃。
When justifying text, the user agent takes the remaining space between the ends of a line's contents and the edges of its line box, and distributes that space throughout its contents so that the contents exactly fill the line box. If the 'letter-spacing' and 'word-spacing' property values allow it, the user agent may also distribute negative space, putting more content on the line than would otherwise fit under normal spacing conditions. The exact justification algorithm is UA-dependent; however, CSS provides some general guidelines which should be followed when any justification method other than 'auto' is specified.