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

text-alignは、文字やインライン要素を左寄せや右寄せにします。

目次 text-alignとは
左寄せ(left) / 右寄せ(right)
中央に寄せ(center) / 両端揃え(justify)
ボタンを中央寄せにする(インライン要素)

text-alignとは

書き方 text-align : 値
left・・・左寄せにします
right・・・右寄せにします
center・・・中央に寄せます
justify・・・両端揃えになります。最終行は除きます。
備考 インライン要素(ボタンやテキストボックス等)を中央寄せまたは右寄せにしたい場合は、インライン要素の親要素にtext-alignを使用します。
ブロックレベル要素を右寄せまたは中央寄せする場合はmarginを指定します。
CSS margin 外側の余白/要素の中央・右寄せ
初期値 left
継承 継承する
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/text-align

左寄せ (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に設定しています。

ボタンを中央寄せにする(インライン要素)

中央寄せの対象がインライン要素の場合、親要素にtext-align:centerを指定します。

<style>
  .div1 {
    border: 1px solid #000;
    width: 300px;
    text-align: center;
  }
</style>
<div class="div1">
  <input type="button" value="ボタン" size="15" />
</div>

関連の記事

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

△上に戻る