text-align は、文字の表示位置を指定するプロパティです。
p {
text-align: center;
}
| text-align | left … （左側に表示します） |
|---|---|
| center … （中央に表示します） | |
| right … （右側に表示します） | |
| justify … （両端に揃えます） |
※justify の指定は、一部の古いブラウザでは対応していないようです。
■justifyの指定について
※複数行に渡る長い文章の場合に、各行（最終行を除く）の右端が綺麗に揃うように単語間隔が自動的に調整されます。
※文字間隔の調整による均等割付を指定する場合は、text-justify プロパティを同時に指定します。
※表示される内容は、letter-spacing や word-spacing プロパティの影響を受ける場合があります。
■left、center、rightの指定例
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
#example1 { text-align: left; }
#example2 { text-align: center; }
#example3 { text-align: right; }
-->
</style>
</head>
<body>
<p id="example1">左寄せ</p>
<p id="example2">中央揃え</p>
<p id="example3">右寄せ</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
左寄せ
中央揃え
右寄せ
■justifyの指定例
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
#example4 {
width: 50%;
border: 1px #c0c0c0 solid;
text-align: left;
}
#example5 {
width: 50%;
border: 1px #c0c0c0 solid;
text-align: justify;
}
-->
</style>
</head>
<body>
<p id="example4">英文は単語の区切りで改行が ...</p>
<p id="example5">英文は単語の区切りで改行が ...</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
※ブラウザの幅を動かすと違いが分かりやすいです。
英文は単語の区切りで改行が入るため、行末が綺麗に揃わない場合がありますが、justifyを指定しておくと綺麗に揃えることができます。English can be beautifully arranged by specifying justify though might beautifully become complete neither the head of line nor the end of line because changing line enters by delimiting the word.
英文は単語の区切りで改行が入るため、行末が綺麗に揃わない場合がありますが、justifyを指定しておくと綺麗に揃えることができます。English can be beautifully arranged by specifying justify though might beautifully become complete neither the head of line nor the end of line because changing line enters by delimiting the word.
