zukucode
主にWEB関連の情報を技術メモとして発信しています。

CSS テキストボックスの文字寄せ(中央寄せ、右寄せなど)を設定する

CSSでテキストボックスの文字寄せを設定する方法を紹介します。

通常テキストボックスは左寄せで入力しますが、中央寄せや、右寄せで入力させたい場合があります。

以下のように、テキストボックスの要素に対してtext-align: 文字寄せ;の形式で指定します。

文字寄せの部分には左寄せの場合はleft、中央寄せの場合はcenter、右寄せの場合はrightを指定します。

<div>
  <input type="text" style="text-align: left;" value="左寄せ">
</div>
<div>
  <input type="text" style="text-align: center;" value="中央寄せ">
</div>
<div>
  <input type="text" style="text-align: right;" value="右寄せ">
</div>

関連記事