HTML でフォームを中央に配置する

Rajeev Baniya 2023年2月19日

HTML HTML Alignment HTML Form

この記事では、フォームを HTML で中央揃えにする方法を紹介します。

CSS の `margin` プロパティを使用して、フォームを HTML の中央に配置する

CSS の margin プロパティを使用して、フォームを HTML の中央に配置できます。

スタイルは、form タグにインライン CSS として記述できます。margin プロパティは、コンテナと隣接する要素の間のスペースを定義します。

まず、プロパティのマージンを設定するための値を指定できます。単一の値を使用する場合、その値はコンテナの 4つの方向すべてに適用されます。

次に、margin プロパティの auto 値を使用してフォームを中央に配置できます。このために、フォームの width を指定して、中央で指定された幅に調整する必要があります。

auto 値は、残りの距離を左右に均等に分割します。

たとえば、form タグを作成し、それに style 属性を書き込みます。style 属性で、margin プロパティを auto に設定し、width プロパティを 220px に設定します。

次に、text の input タグと submit の別の input タグを作成します。

以下の例では、中央揃えのフォームを作成します。フォームの幅は 220px で、残りのスペースは左右の余白に分割されます。

このようにして、HTML の CSS を使用して、margin:auto で中央揃えのフォームを作成できます。

サンプルコード：

<form style="margin: auto; width: 220px;">
    Enter name:<input type="text" />
    <input type="submit" value="Submit"/>
</form>

text-align プロパティを使用して、CSS でのテキストの配置を指定します。プロパティを form タグのインラインスタイルとして使用して、フォームの配置を設定できます。

text-align プロパティは、left、right、center、justify などの値を取ります。フォームを中央に配置するには、値を center に設定できます。

たとえば、text-align プロパティを style 属性の form タグに適用し、プロパティを center に設定します。次に、タイプが text の input タグを作成してから、submit を作成します。

以下の例では、フォームのすべてのコンテンツを中央に配置します。ただし、マージンが指定されていないため、フォームはブロック全体を占めます。

このようにして、フォームを HTML の中央に配置できます。

サンプルコード：

<form style="text-align: center; ">
    Enter name:<input type="text"/> <br><br>
    <input type="submit" value="Submit"/>
</form>

フォームの幅をビューポート幅の 50％に設定してから、幅の 25％を左側の余白として指定できます。width および margin-left CSS プロパティを使用して、幅とマージンを設定し、目標を達成できます。

最後に、vw 単位を使用して長さを指定できます。たとえば、form タグの style 属性として、width を 50vw に設定し、margin-left を 25vw に設定します。

ここで、値 50vw はビューポート幅の 50％を占め、値 25vw はビューポート幅の 25％を左マージンとして与えます。残りの 25％のスペースは、フォームの右側に表示されます。

このようにして、フォームを HTML の中央に配置できます。

サンプルコード：

<form style=" width: 50vw; margin-left : 25vw;">
    Enter name:<input type="text"/> <br><br>
    <input type="submit" value="Submit"/>
</form>