質問失礼します。
現在独学で、デザインカンプを行っています。
下記、画像にあります送信ボタンが中央揃えにならなくて困っています。
CSSでinputに<div>を付けて、argin: 0 auto; またはtext-align: center;を入れても
位置が変わりません。
修正箇所お教えください!
HTML
1<div class="form"> 2 <h3>お問い合わせ</h3> 3 <form action="#"> 4 <div class="contacts"> 5 <div> 6 <label for="name">担当者名</label><br> 7 <input type="text" id="name" name="your-name"> 8 </div> 9 <div> 10 <label for="tel">電話番号</label><br> 11 <input type="tel" id="tel" name="your-tel"> 12 </div> 13 <div> 14 <label for="email">メールアドレス</label><br> 15 <input type="email" id="email" name="your-email"> 16 </div> 17 <div> 18 <label for="message">メッセージを入力</label><br> 19 <input type="message" id="message" name="your-message"> 20 </div> 21 <div class="input_wrap"> 22 <input type="submit" class="btn" value="送信"> 23 </div> 24 </div> 25 </form> 26
CSS
1div.form { 2 width: 698px; 3 background-color: white; 4 margin: 0 auto; 5 margin-bottom: 50px; 6 border: 2px solid blue; 7} 8 9div.contacts { 10 margin-bottom: 22px; 11 width: 700px; 12 height: auto; 13} 14 15div.contacts div { 16 margin-bottom: 22px; 17} 18 19div.form label { 20 font-size: 16px; 21 line-height: 30px; 22} 23 24input[type="text"], 25input[type="tel"], 26input[type="email"] { 27 width: 700px; 28 height: 30px; 29 border: 2px solid #141414; 30 font-family: "Hiragino Kaku Gothic ProN"; 31} 32 33input[type="message"] { 34 width: 700px; 35 height: 171px; 36 border: 2px solid #141414; 37 font-family: "Hiragino Kaku Gothic ProN"; 38} 39 40div.input_wrap { 41 margin: 0 auto; 42 text-align: center; 43 margin-top: 50px; 44} 45 46input[type="submit"] { 47 border: 2px solid lightgray; 48 cursor: pointer; 49 line-height: 59px; 50 background-color: #1B1310; 51 color: white; 52 font-weight: bold; 53 font-size: 20px; 54 width: 235px; 55 height: 59px; 56 border-radius: 51px; 57} 58