プロパティ名 | 値 | 適用対象 | 継承 |
---|---|---|---|
text-align: | 行揃え位置 | ブロックレベル要素 | 有り |
値 | 説明 | |
---|---|---|
行揃え位置 | left | 左揃えで配置。 |
right | 右揃えで配置。 | |
center | 中央揃え(センタリング)で配置。 | |
justify | 均等割付(両端揃え)で配置。 |
text-alignプロパティは、行揃えを設定します。値には、left、right、center、justify の どれかを指定します。
それぞれ「左揃え」「右揃え「中央揃え」を表します。このプロパティは、ブロックレベル要素に対して指定して、その内容の行揃えを設定するもので、ブロックレベル要素自体(ボックス等)をセンタリングしたい場合は、左右のマージンを
「auto」に設定してください。
それぞれ「左揃え」「右揃え「中央揃え」を表します。このプロパティは、ブロックレベル要素に対して指定して、その内容の行揃えを設定するもので、ブロックレベル要素自体(ボックス等)をセンタリングしたい場合は、左右のマージンを
「auto」に設定してください。
●justifyは、Internet Explorer 5.0以上に対応していますが、Firefoxには、対応していません。
●均等割付をするには、text-justifyプロパティとの組み合わせが必要です。
サンプルソース
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<style type="text/css">
<!--
p{font-size:30pt;
color:red;
background-color:#00FFFF
}
.sampl01{text-align:left}
.sampl02{text-align:center}
.sampl03{text-align:right}
.sampl04{text-align:justify;
text-justify:distribute-all-lines
}
</style>
</head>
<body>
<p class="sampl01">左揃えで表示してます。</p>
<p class="sampl02">中央揃えで表示してます。</p>
<p class="sampl03">右揃えで表示してます。</p>
<p class="sampl04">均等割付で表示してます。</p>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"