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

HTML テキスト ボックスを中央揃えにする方法には、特定のコード例が必要です。

Web デザインでは、要素を中央揃えにすることが一般的なレイアウト要件です。 HTML テキスト ボックスの場合、中央に表示する方法がいくつかあります。以下では、一般的に使用されるセンタリング方法を詳しく紹介し、具体的なコード例を添付します。

方法 1: CSS スタイル シートの centering 属性を使用する

テキスト ボックスを中央揃えで表示するには、CSS スタイル シートの text-align 属性を使用します。テキスト ボックスが配置されている親コンテナ要素を中央揃えに設定するだけです。

まず、HTML ドキュメントの先頭または外部スタイル シートで CSS スタイルを定義します。例は次のとおりです。

<style>
    .container {
        text-align: center;
    }
</style>

次に、HTML ドキュメントの本文部分で、コンテナ要素内の中央に配置する必要があるテキスト ボックスを配置します。サンプル コードは次のとおりです。

<div class="container">
    <input type="text" name="textbox" />
</div>

上記の例では、テキスト ボックスを div 要素内に配置し、div のクラス名を「container」に設定します。クラス名に対応するCSSスタイルでは、text-align属性がcenter、つまり中央揃えに設定されています。

このようにして、テキスト ボックスは親コンテナの中央に水平に表示されます。

方法 2: CSS スタイル シートの margin 属性を使用する

一般的に使用されるもう 1 つの中央揃え方法は、テキスト ボックスに余白を追加することです。左右の余白を「自動」に設定すると、テキストボックスを自動的に横方向の中央揃えにすることができます。

サンプル コードは次のとおりです。

<style>
    .container {
        width: 300px; /* 设置容器的宽度 */
    }

    .textbox {
        margin-left: auto;
        margin-right: auto;
    }
</style>

上記の例では、最初にコンテナの CSS スタイルで幅が設定されます。次に、テキスト ボックスの CSS スタイルで margin-left と margin-right を auto に設定します。これは、左右のマージンが自動的に割り当てられ、テキスト ボックスが水平方向にコンテナ内の中央に表示されることを意味します。

次に、HTML ドキュメントのボディ部分で、クラス名がcontainerで設定されたコンテナ要素内にテキスト ボックスを配置します。サンプルコードは以下のとおりです。

<div class="container">
    <input type="text" name="textbox" class="textbox" />
</div>

クラス名「textbox」のCSSスタイルをテキストボックスに追加することで、テキストボックスを自動的に中央揃えにすることができます。

上記は、HTML テキスト ボックスを中央揃えにするための一般的で簡単で実用的な 2 つの方法です。実際の状況に応じて、これらのいずれかを選択するか、組み合わせて使用​​して、テキスト ボックスの中央揃え効果を実現します。

上記の例のコードは参照のみを目的としており、実際の使用中に特定のニーズに応じて変更および調整できることに注意してください。

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