HTMLでテキストボックスを中央揃えにする方法

HTML テキスト ボックスを中央揃えにする方法は数多くあります。 テキスト入力ボックス: CSS コードを使用します input[type="text"] { text-align: center } テキスト エリア: CSS コードを使用します textarea { text-align; : center; }水平方向の中央揃え: テキスト ボックスの親要素の text-align: center スタイルを使用します。表示:

HTML でテキスト ボックスを中央揃えにする方法

テキスト ボックスを HTML で中央揃えにする方法はたくさんあります。 HTML (希望に応じて) 中央揃えのテキスト ボックスのタイプと全体のレイアウト。

#テキスト入力ボックス

テキスト入力ボックスには、次の CSS コードを使用できます:

<code class="css">input[type="text"] {
  text-align: center;
}</code>

テキスト領域

テキスト領域には、次の CSS コードを使用できます:

<code class="css">textarea {
  text-align: center;
}</code>

水平方向の中央揃え

テキスト ボックスを水平方向の中央揃えにする必要がある場合は、テキスト ボックスの親要素で実行できます。

text-align: center を使用します。 スタイル:

<code class="html"><div style="text-align: center;">
  <input type="text" value="文本">
</div></code>

垂直中心

垂直方向の中央揃えの場合は、

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

<code class="css">input[type="text"] {
  vertical-align: middle;
}</code>

Via Flexbox

Flexbox は、テキスト ボックスを簡単に中央に配置できる強力なレイアウト システムです:

<code class="html"><div style="display: flex; justify-content: center;">
  <input type="text" value="文本">
</div></code>

注 テキスト ボックスの親要素の幅と高さが明確であることを確認してください。 テキスト ボックスに長いテキストがある場合は、テキストのオーバーフローを防ぐために、

overflow:scroll

または
• word-wrap:break-word
スタイルの使用を検討してください。

以上がHTMLでテキストボックスを中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。