前提・実現したいこと
お問合せフォームを作っているのですが、pタグやinputタグを左揃えにしつつformタグの全体を中央寄せにしたいです。
inlile-blockなど色々方法を試しましたが上手くいきません。
どうすれば上手く行きますでしょうか?
ご教示お願い致します。
該当のソースコード
<section id="contact"> <h2 class="section-title">Contact</h2> <form> <div class="item"> <p>お名前</p> <input class="name" type="text" name="name"> </div> <div class="item"> <p>メールアドレス</p> <input class="mail" type="text" name="mail"> </div> <div class="item"> <p>電話番号</p> <input class="number" type="text" name="number"> </div> <div class="item"> <p>お問い合わせ内容</p> <textarea class="text" name="text"></textarea> </div> <div class="btn-container"> <input class="btn" type="submit" value="送信する"> </div> </form> </section>
form { height: 700px; width: 900px; margin: 30px 0; padding: 50px 0; background: #eaeaea; text-align: center; } .item { text-align: left; display: block; margin-bottom: 50px; }
試したこと
親要素にtext-align: center;
子要素にdisplay: inline-block; と text-align: left;
こちらを試したが、縦並びにしたいのでdisplay: inline-block;は使えず。
display: block;だとtext-align: center;が適用されませんでした。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。