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

下次还敢
リリース: 2024-04-22 10:33:23
オリジナル
965 人が閲覧しました

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

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

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート