text-align: ***;

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
プロパティ

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: 50%;
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.

  • ブラウザの幅を動かすと違いが分かりやすいです。