text-align: ***;
- ブラウザ
- 特性
- text-align
text-align は、内容の水平方向の表示位置を指定するプロパティです。
p {
text-align: center;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| text-align | left | 左寄せで表示 |
| center | 中央揃えで表示 | |
| right | 右寄せで表示 | |
| justify | 両端揃えで表示 |
【justifyの指定について】
- 複数行に渡る長い文章の場合に、各行（最終行を除く）の右端が綺麗に揃うように単語間隔が自動的に調整されます。（英文などの場合に有効のようです）
- 文字間隔の調整による均等割付を指定する場合は、同時に「均等割付の形式」を指定する必要があります。
- 表示される内容は、letter-spacingプロパティやword-spacingプロパティの影響を受ける場合があります。
使用例
■left、center、rightを指定した例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
p.example1 { text-align: left; }
p.example2 { text-align: center; }
p.example3 { text-align: right; }
</style>
</head>
<body>
<p class="example1">左寄せ</p>
<p class="example2">中央揃え</p>
<p class="example3">右寄せ</p>
</body>
</html>
表示例
左寄せ
中央揃え
右寄せ
■justifyを指定した例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
p {
width: 40%;
border: 1px #808080 solid;
}
p.example4 { text-align: justify; }
</style>
</head>
<body>
<p>英文は単語の区切りで改行が ...</p>
<p class="example4">英文は単語の区切りで改行が ...</p>
</body>
</html>
表示例
※ブラウザの幅を動かすと違いが分かりやすいです。
英文は単語の区切りで改行が入るため、行末が綺麗に揃わない場合がありますが、justifyを指定しておくと綺麗に揃えることができます。The text-align property specifies the horizontal text alignment. The justify value adjust the spaces between the words to justify both left and right side.
英文は単語の区切りで改行が入るため、行末が綺麗に揃わない場合がありますが、justifyを指定しておくと綺麗に揃えることができます。The text-align property specifies the horizontal text alignment. The justify value adjust the spaces between the words to justify both left and right side.
- サイト内検索
