CSS text-align 文字を左寄せ/右寄せにする

CSSのtext-alignのサンプルです。

目次

サンプル text-alignプロパティ
  左寄せ (left)
  右寄せ (right)
  中央寄せ (center)
  両端揃え (justify)
  ブロック要素を中央寄せ(margin)

text-alignプロパティ

text-align : 値

text-alignプロパティは、文字を左寄せまたは右寄せにします。

説明
left 左寄せにします。
right 右寄せにします。
center 中央に寄せます。
justify 両端揃えになります。最終行は除きます。
justify-all 両端揃えになります。最終行も含みます。
値を継承する

文字を寄せるサンプルです。

左寄せ (left)

<style>
  .p1 {
    text-align: left;
    border: 1px solid #000;
    width: 200px;
    height: 50px;
    background: LightCyan;
  }
</style>
<p class="p1">左寄せ</p>

右寄せ (right)

<style>
  .p1 {
    text-align: right;
    border: 1px solid #000;
    width: 200px;
    height: 50px;
    background: LightCyan;
  }
</style>
<p class="p1">右寄せ</p>

中央寄せ (center)

<style>
  .p1 {
    text-align: center;
    border: 1px solid #000;
    width: 200px;
    height: 50px;
    background: LightCyan;
  }
</style>
<p class="p1">中央寄せ</p>

両端揃え (justify)

<style>
  .p4 {
    text-align: left;
  }
  .p5 {
    text-align: justify;
  }
  p {
    border: 1px solid #000;
    width: 200px;
    height: 50px;
    background: LightCyan;
  }
</style>
<p class="p4">This is an apple.This is an apple.</p>
<p class="p5">This is an apple.This is an apple.</p>

3行目は、justifyとの比較用でleftに設定しています。

ブロック要素を中央寄せ(margin)

<style>
  .div1 {
    border: 1px solid #000;
    width: 300px;
  }
  .div2 {
    margin: 0 auto;
    height: 50px;
    width: 100px;
    border: 1px solid #000;
  }
</style>
<div class="div1">
  <div class="div2">テスト2</div>
</div>

7行目は、marginで上下を0に左右をautoに指定しています。

関連の記事

CSS color 文字の色を指定するサンプル
CSS font-family フォントを指定するサンプル
CSS vertical-align 垂直の位置を指定するサンプル

△上に戻る