送信ボタンを中央配置にしたいです。
<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 コメント