WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「行揃え」

text-align 「横(水平)方向の文字位置」

「text-align」は文字の横(水平)方向の位置を指定します。
ブロックコンテナに有効で、SPANなどのインライン要素にはそのままでは適用できません。

CSS Ver.適用要素継承
2.1
3.0で拡張
ブロック
コンテナ
する
広告

text-alignの指定方法

構文

text-align : left | right | center | justify | start | end | match-parent;

プロパティ/設定値意味
text-align : left; 左揃え
text-align : right; 右揃え
text-align : center; 中央揃え
text-align : justify; 改行時の両端揃え
text-align : start; 言語の開始方向(日本語や英語は右揃え)CSS3
IEは無効
text-align : end; 言語の終了方向(日本語や英語は左揃え)CSS3
IEは無効
text-align : match-parent; 親要素の言語方向に合わせるCSS3
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

text-align のサンプル


<style type="text/css">
.sample1{
   margin:5px;
   padding:5px;
   border :1px solid #666;
   width :250px;
}
.left   { text-align : left; }
.center { text-align : center; }
.right  { text-align : right; }
.start  { text-align : start; }
.end    { text-align : end; }
.justify{ text-align : justify; text-justify : inter-ideograph; } /* IE対応 */
</style>

<!-- html -->
<div class="sample1 left">text-align:left<br>[左寄せ]</div>
<div class="sample1 center">text-align:center<br>[中央寄せ]</div>
<div class="sample1 right">text-align:right<br>[右寄せ]</div>
<div class="sample1 start">text-align:start<br>[日本語は左寄せ]<br>IE無効</div>
<div class="sample1 end">text-align:end<br>[日本語は右寄せ]<br>IE無効</div>
<div class="sample1 justify">
IEはjustifyだけでは均等割り付けができません。「text-justify:inter-ideograph;」の指定も追加すると均等割り付けになります。
</div>
text-align:left
[左寄せ]
text-align:center
[中央寄せ]
text-align:right
[右寄せ]
text-align:start
[日本語は左寄せ]
IE無効
text-align:end
[日本語は右寄せ]
IE無効
IEはjustifyだけでは均等割り付けができません。「text-justify:inter-ideograph;」の指定も追加すると均等割り付けになります。

justifyの注意点

IEは「text-align」だけでは両端合わせができません。「text-justify:inter-ideograph;」などの指定を追加することで、両端合わせができませす。

text-align:justifytext-align:justify
text-justify:inter-ideograph
IE text-align text-align
Chorme
など
text-align text-align
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン