HTMLフォームのsubmitボタンの配置とスタイリングについて

2024-02-08 04:01 HTML フォーム submitボタン

  1. align属性を使用する方法: <input type="submit" align="center">のように、align属性を使用してsubmitボタンを中央に配置することができます。ただし、align属性は非推奨とされており、CSSを使用した方が望ましい方法です。

  2. CSSを使用する方法: CSSを使用してsubmitボタンを配置し、スタイリングすることができます。以下は例です。

    HTML:

    <style>
.centered-button {
 display: block;
 margin: 0 auto;
}
</style>
<input type="submit" class="centered-button" value="Submit">

    CSS部分では、.centered-buttonというクラスを定義し、display: block;およびmargin: 0 auto;のプロパティを使用してsubmitボタンを中央に配置しています。

  3. Flexboxを使用する方法: Flexboxは、アイテムを柔軟に配置するための強力なCSSの機能です。以下はFlexboxを使用してsubmitボタンを中央に配置する方法です。

    HTML:

    <style>
.container {
 display: flex;
 justify-content: center;
}
</style>
<div class="container">
 <input type="submit" value="Submit">
</div>

    CSS部分では、.containerというクラスを定義し、display: flex;およびjustify-content: center;のプロパティを使用してsubmitボタンを中央に配置しています。

これらの方法を使用することで、HTMLフォームのsubmitボタンを中央に配置し、必要に応じてスタイリングすることができます。詳細なコード例を参考にしてください。