【text-align】文字の行揃えの位置を指定

text-alignプロパティでは、文字(テキスト)などの行揃えの位置を指定できます。

この属性はブロックレベル要素に対して指定して下さい。 値にleft、right、centerなどを指定すると左右中央にテキストなどが行揃えされるようになります。

また欧文や記号、数字などはjustifyを指定する事で、単語間のスペースを調整し均等割付させることができます。 これは主に単語を半角スペースで区切って表記する欧文などで使用されるもので、日本語の文章に設定しても効果はありません。

なおjustifyを使用する場合は、text-justifyプロパティと併用して指定して下さい。

書式

  • text-align : ……… 行揃え・均等割付(文字の水平方向の位置を指定)

★:left、right、center、justify、inherit

left
左寄せ
right
右寄せ
center
中央揃え(センタリング)
justify
均等割付(両端揃え)

使用した時の例

.sample1 {text-align: left;}
.sample2 {text-align: right;}
.sample3 {text-align: center;}
.sample4 {text-align: justify; text-justify: distribute-all-lines;}
<div class="sample1">text-align:left(左寄せ)</div>
<div class="sample2">text-align:right(右寄せ)</div>
<div class="sample3">text-align:center(中央揃え)</div>
<div class="sample4">text-align:justify(均等割付)
......Just remember that justify does not use much, but others use it a lot,
However, justify is convenient as it will be a beautiful text like this when creating
 a homepage in English</div>

ブラウザ上の表示例

text-align:left(左寄せ)
text-align:right(右寄せ)
text-align:center(中央揃え)
text-align:justify(均等割付) ……Just remember that justify does not use much, but others use it a lot, However, justify is convenient as it will be a beautiful text like this when creating a homepage in English

対応ブラウザなどのデータ

初期値 ブラウザと文字の表記による 値の継承 継承する
適用可能な要素 ブロックレベル要素
メディア visual / text
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~