入力内のテキストを揃える方法は？

すべてのデフォルト入力では、入力するテキストは左側から始まります。どのように右側から始めますか？

CSSでtext-alignプロパティを使用します。

input { 
    text-align: right; 
}

これは、ページのすべての入力で有効になります。
それ以外の場合、1つの入力のテキストのみを揃える場合は、スタイルをインラインで設定します。

<input type="text" style="text-align:right;"/> 

CSSでこれを試してください：

input {
text-align: right;
}

テキストを中央に揃えるには：

input {
text-align: center;
}

しかし、それがデフォルトであるため、左揃えにする必要があり、最もユーザーフレンドリーであるように見えます。

どうぞ：

input[type=text] { text-align:right }

<form>
    <input type="text" name="name" value="">
</form>

ここで受け入れられた答えは正しいですが、少し情報を追加したいと思います。ブートストラップのようなライブラリ/フレームワークを使用している場合は、このためのクラスが組み込まれている場合があります。たとえば、ブートストラップはtext-rightクラスを使用します。次のように使用します。

<input type="text" class="text-right"/> 
<input type="number" class="text-right"/>

注として、これは上記の数値のような他の入力タイプでも機能します。

ブートストラップのような素晴らしいフレームワークを使用していない場合は、このヘルパークラスの独自のバージョンを作成できます。他の回答と同様ですが、入力クラスに直接追加しないため、サイトまたはページのすべての入力に適用されるわけではありません。これは望ましい動作ではない可能性があります。したがって、これは、インラインスタイルを設定したり、すべての入力ボックスに影響を与えたりすることなく、物事を正しい位置に揃えるための素晴らしい簡単なcssクラスを作成します。

.text-right{
    text-align: right;
}

これで、上記の入力とまったく同じようにこのクラスを使用できますclass="text-right"。多くのキーストロークが節約されないことはわかっていますが、コードがよりクリーンになります。

テキストがフォーカスを失った後に右に揃えたい場合は、方向修飾子を使用してみてください。これにより、フォーカスを失うと、テキストの正しい部分が表示されます。たとえば、大きなパスでファイル名を表示したい場合に便利です。

input.rightAligned {
  direction:ltr;
  overflow:hidden;
}
input.rightAligned:not(:focus) {
  direction:rtl;
  text-align: left;
  unicode-bidi: plaintext;
  text-overflow: ellipsis;
}

<form>
    <input type="text" class="rightAligned" name="name" value="">
</form>

notセレクターは現在よくサポートされています：ブラウザーのサポート

@ Html.TextBoxFor（model => model.IssueDate、new {@class = "form-control"、name = "inv_issue_date"、id = "inv_issue_date"、title = "Select Invoice Issue Date"、placeholder = "dd / mm / yyyy "、style =" text-align：center; "}）

CSSなし：テキスト入力のSTYLEプロパティを使用

STYLE = "text-align：right;"