text-alignプロパティ

TOPページに戻る > CSS

スポンサード リンク

text-alignプロパティ

行を左寄せ、右寄せ、中央に揃える
値はleft、right、centerで指定、text-alignプロパティを使わなかった場合は、日本語の場合、左寄せになります
text-alignプロパティで指定できるのは文字など、boxの中身だけです

※値をjustify(両端揃え)にする場合は、text-justifyプロパティも同時に使用するとスタイルが適用されます
日本語を両端揃えするにはtext-justifyプロパティの値をinter-ideographにしてください。日本語を両端揃えを対応しているブラウザはIEとFirefoxのみです

使い方(書式)

セレクタ { text-align: 値; }                                    

text-alignプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 ブロック要素、td要素、th要素
子要素へのスタイルの継承 する

プロパティの値 説明
left 左寄せ
right 右寄せ
center 中央揃え
justify 両端揃え

実際の指定方法

.hoge { text-align: left; }   /* 左寄せ */

.hoge2 { text-align: right; }  /* 右寄せ */

.hoge3 { text-align: center; }   /* 中央寄せ */
.hoge4 { text-align: justify; }   /* 両端揃え */

html部分

<p class="hoge">left</p>
<p class="hoge2">right</p>
<p class="hoge3">center</p>
<p>justify↓対応しているブラウザで両端をみてください</p>
<p class="hoge4">近くのパン屋さんで大好きなのはフランスパンのあんぱんなのよ。
甘さがほど良く歯ごたえがあってとってもおいしいの。ぜひ、食べて見てくださいませね。
揚げパンもカリカリできなこがついててこれもおしいの。チキンハンバーガーも人気なの。
タレが甘辛くて若い人に人気なのよ。うち、まじよ</p>

実際の表示

left

right

center

justify↓対応しているブラウザで両端をみてください

近くのパン屋さんで大好きなのはフランスパンのあんぱんなのよ。甘さがほど良く歯ごたえがあってとってもおいしいの。ぜひ、食べて見てくださいませね。揚げパンもカリカリできなこがついててこれもおしいの。チキンハンバーガーも人気なの。タレが甘辛くて若い人に人気なのよ。うち、まじよ


justifyではない普通の文章

近くのパン屋さんで大好きなのはフランスパンのあんぱんなのよ。甘さがほど良く歯ごたえがあってとってもおいしいの。ぜひ、食べて見てくださいませね。揚げパンもカリカリできなこがついててこれもおしいの。チキンハンバーガーも人気なの。タレが甘辛くて若い人に人気なのよ。うち、まじよ





(C)2012 ホームページ作成無料