HTML でフォームを中央に配置する
-
CSS の
marginプロパティを使用して、フォームを HTML の中央に配置する -
CSS の
text-alignプロパティを使用して、フォームを HTML の中央に配置する -
CSS の
widthおよびmargin-leftプロパティを使用して、フォームを HTML の中央に配置する
この記事では、フォームを 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>
CSS の text-align プロパティを使用して、フォームを HTML の中央に配置する
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>
CSS の width および margin-left プロパティを使用して、フォームを HTML の中央に配置する
フォームの幅をビューポート幅の 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>