【HTML CSS】送信ボタンを中央配置にできない

送信ボタンを中央配置にしたいです。

        <form class="form"> <p> <label> <span class="sr-only">名前</span> <input type="text" name="name" placeholder="名前"> </label> </p> <p> <label> <span class="sr-only">メールアドレス</span> <input type="email" name="email" placeholder="メールアドレス"> </label> </p> <p> <label> <span class="sr-only">メッセージ</span> <textarea name="msg" placeholder="メッセージを入力してください。"></textarea> </label> </p>       <p> <input type="submit" value="送信" class="btn"> </p> </form>

このコード後半の送信ボタン部分を中央配置したいです。
調べてみると、<input>タグはinline-bloick要素であるため、親要素にクラスを追加して、そこにtext-align: center;を指定すればよいと検索すれば出てきました。

そこで、実際に

      <p **class=btn**> <input type="submit" value="送信" class="btn2"> </p>

のようにクラスを追加しして、cssで

.form .btn { text-align: center; }

を追加しましたが、中央配置されません。

解決策をどなたか教えていただけませんでしょうか。
よろしくお願いします。

コメントを投稿

0 コメント