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

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

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

テキスト ボックスの配置は、クリーンで美しいフォームを作成するために重要です。 HTML を使用すると、テキスト ボックスの水平方向と垂直方向の配置を簡単に制御できます。

水平方向の配置

水平方向の配置は、テキスト ボックス内のテキストの左右の位置を制御します。 HTML には 3 つの主なオプションがあります:

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

プロパティで、水平方向の配置を設定できます。例:

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

これにより、テキストが右揃えでテキスト ボックスが作成されます。 垂直方向の配置

垂直方向の配置は、テキスト ボックス内のテキストの上下の位置を制御します。 HTML には直接の配置プロパティはありませんが、CSS の

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

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

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

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

これにより、テキストが垂直方向の中央に配置されたテキスト ボックスが作成されます。

実際のケース:

text-align

と

vertical-align

テキストを含むフォームがあるとします。日付を記入するボックス。日付を右揃えで垂直方向の中央揃えにするには、次の HTML および CSS コードを使用できます。 <pre class='brush:php;toolbar:false;'>&lt;div style=&quot;display: flex; justify-content: end;&quot;&gt; &lt;label for=&quot;date&quot;&gt;日期：&lt;/label&gt; &lt;input type=&quot;text&quot; id=&quot;date&quot; style=&quot;text-align: right; vertical-align: middle;&quot;&gt; &lt;/div&gt;</pre>このコードは、右揃えで垂直方向の中央揃えの日付テキスト ボックスを作成します。

以上がテキストボックスの配置を改善するための HTML のヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。