テキストボックスの配置を改善するための HTML のヒント

HTML には、テキスト ボックスの配置を制御する text-align 属性とvertical-align 属性が用意されています。水平方向の配置オプションには、整列、左、右が含まれます。垂直方向の配置オプションには、ベースライン、中央、上、下が含まれます。これらのプロパティを使用すると、クリーンで美しいフォームを作成できます。たとえば、日付テキスト ボックスを右に配置し、垂直方向の中央に配置して、ラベルと正確に揃えることができます。

#HTML を使用してテキスト ボックスの配置を改善する

水平方向の配置

• "justify": テキストを両端で揃えます
• "left": テキストを両端で揃えますto the left
• "right": style で
text-align## を指定すると、テキストが右揃えになります。テキストボックスの # 属性の

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

vertical-align プロパティを使用できます。

"baseline": テキストはベースラインに揃えられます

• "middle": テキストは垂直方向に中央揃えになります
• "top": テキストの上揃え
• "bottom": テキストの下揃え
• 垂直方向の配置を設定するにはvertical-align 属性が、テキスト ボックスを含む要素の CSS スタイルに追加される必要があります。例:

<div style="vertical-align: middle;">
  <input type="text">
</div>

ログイン後にコピー

実際のケース:

と

テキストを含むフォームがあるとします。日付を記入するボックス。日付を右揃えで垂直方向の中央揃えにするには、次の HTML および CSS コードを使用できます。

<div style="display: flex; justify-content: end;">
  <label for="date">日期：</label>
  <input type="text" id="date" style="text-align: right; vertical-align: middle;">
</div>