Q&A
状況が再現しないですね。中央に表示されます。
以下質問させて頂きたくお願いいたします。
※あまりこういった質問に慣れていないので質問の仕方が悪い場合は申し訳ありません。
何か追加情報が必要であればお申し付け頂ければ幸いです。
【ゴール】
PC閲覧での入力フォーム・送信ボタンを中央寄りにしたい。
【課題】
スマホ閲覧では中央寄りになるのですが、PC閲覧では左寄りになってしまう。
【試してみたこと】
HTML row要素にtext-align:centerにしてもダメでした。
HTML
1 <section class="contact-one"> 2 <div id="contact" class="container"> 3 <div class="block-title-two text-center"> 4 <h3>その他お問い合わせは<br>コチラから</h3> 5 </div><!-- /.block-title-two --> 6 <div class="row" style="text-align: center;"> 7 <div class="col-lg-7"> 8 <div class="my-auto"> 9 <form action="inc/sendemail.php" class="contact-form-validated contact-one__form"> 10 <div class="row"> 11 <div class="col-lg-6"> 12 <div class="contact-one__input-group"> 13 <i class="contact-one__input-icon far fa-user"></i> 14 <input type="text" name="name" placeholder="お名前"> 15 </div><!-- /.contact-one__input-group --> 16 </div><!-- /.col-lg-6 --> 17 <div class="col-lg-6"> 18 <div class="contact-one__input-group"> 19 <i class="contact-one__input-icon far fa-envelope"></i> 20 <input type="text" name="email" placeholder="メールアドレス"> 21 </div><!-- /.contact-one__input-group --> 22 </div><!-- /.col-lg-6 --> 23 <div class="col-lg-6"> 24 <div class="contact-one__input-group"> 25 <select class="selectpicker" name"service"> 26 <option value>お客様の業種</option> 27 <option value>農林・水産</option> 28 <option value>林業</option> 29 <option value>漁業</option> 30 <option value>鉱業</option> 31 <option value>建設業</option> 32 <option value>製造業</option> 33 <option value>電気・ガス</option> 34 <option value>運輸・通信業</option> 35 <option value>卸売・小売・飲食業</option> 36 <option value>金融・保険業</option> 37 <option value>不動産業</option> 38 <option value>サービス業</option> 39 <option value>IT関連</option> 40 <option value>その他</option> 41 </select><!-- /.selectpicker --> 42 </div><!-- /.contact-one__input-group --> 43 </div><!-- /.col-lg-6 --> 44 <div class="col-lg-6"> 45 <div class="contact-one__input-group"> 46 <i class="contact-one__input-icon far fa-phone"></i> 47 <input type="text" name="phone" placeholder="電話番号"> 48 </div><!-- /.contact-one__input-group --> 49 </div><!-- /.col-lg-6 --> 50 <div class="col-lg-12"> 51 <div class="contact-one__input-group"> 52 <i class="contact-one__input-icon far fa-pencil-alt"></i> 53 <textarea name="message" placeholder="お問い合わせ内容"></textarea> 54 </div><!-- /.contact-one__input-group --> 55 </div><!-- /.col-lg-12 --> 56 <div class="col-lg-12"> 57 <button type="submit" class="thm-btn contact-one__form-btn">送信する<i class="fa fa-angle-double-right"></i></button> 58 <!-- /.thm-btn contact-one__form-btn --> 59 </div><!-- /.col-lg-12 --> 60 </div><!-- /.row --> 61 </form><!-- /.contact-one__form --> 62 <div class="result"></div><!-- /.result --> 63 </div><!-- /.my-auto --> 64 </div><!-- /.col-lg-7 --> 65 </div><!-- /.row --> 66 </div><!-- /.container --> 67 </section><!-- /.contact-one --> 68
CSS
1 2.contact-one { 3 padding-top: 130px; 4} 5 6 7.contact-one__box { 8 background-repeat: no-repeat; 9 background-position: center center; 10 background-size: cover; 11 position: relative; 12} 13 14.contact-one__box-inner { 15 position: relative; 16 background-color: rgba(var(--thm-base-rgb), .86); 17 padding-left: 50px; 18 padding-right: 30px; 19 padding-top: 120px; 20 padding-bottom: 130px; 21} 22 23 24.contact-one__box-inner h3 { 25 margin: 0; 26 color: #fff; 27 font-size: 45px; 28 line-height: 1em; 29 letter-spacing: -0.03em; 30} 31 32.contact-one__box-inner p { 33 font-weight: 600; 34 color: #fff; 35 font-size: 16px; 36 line-height: 35px; 37 margin: 0; 38 margin-top: 40px; 39 margin-bottom: 50px; 40} 41 42.contact-one__box-btn { 43 background-color: #fff; 44 color: var(--thm-black); 45 border-radius: 35px; 46 padding: 19px 46.5px; 47} 48 49@media(min-width: 992px) { 50 51 .contact-one__box { 52 margin-right: 70px; 53 } 54 55 .contact-one__form { 56 margin-left: -30px; 57 } 58} 59 60 61.contact-one__input-group { 62 position: relative; 63 margin-bottom: 20px; 64} 65 66.contact-one__input-icon { 67 color: var(--thm-base); 68 font-size: 14px; 69 position: absolute; 70 top: 28px; 71 right: 30px; 72 z-index: 11; 73} 74 75.contact-one__form textarea, 76.contact-one__form .bootstrap-select>.dropdown-toggle, 77.contact-one__form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) { 78 border: none; 79 outline: none; 80 width: 100%; 81 border: 2px solid rgba(31, 49, 81, .1); 82 height: 70px; 83 font-size: 14px; 84 font-weight: 600; 85 color: #5f5f5f; 86 display: block; 87 padding-left: 30px; 88 background-color: #fff; 89 border-radius: 0; 90 padding-right: 30px; 91} 92 93.contact-one__form .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { 94 width: 100%; 95} 96 97.contact-one__form ::-webkit-input-placeholder { 98 opacity: 1; 99 color: #5f5f5f; 100} 101 102.contact-one__form ::-moz-placeholder { 103 opacity: 1; 104 color: #5f5f5f; 105} 106 107.contact-one__form :-ms-input-placeholder { 108 opacity: 1; 109 color: #5f5f5f; 110} 111 112.contact-one__form ::-ms-input-placeholder { 113 opacity: 1; 114 color: #5f5f5f; 115} 116 117.contact-one__form ::placeholder { 118 opacity: 1; 119 color: #5f5f5f; 120} 121 122.contact-one__form-btn { 123 background-color: rgb(31, 49, 81); 124 padding-left: 0; 125 padding-right: 0; 126 padding-top: 19px; 127 padding-bottom: 19px; 128 border-radius: 35px; 129 width: 100%; 130 max-width: 340px; 131 color: #fff; 132} 133 134.contact-one__form-btn:hover { 135 background-color: var(--thm-base); 136} 137 138.contact-one__form textarea { 139 height: 140px; 140 padding-top: 10px; 141} 142 143.contact-one__form .bootstrap-select .dropdown-toggle .filter-option { 144 display: -webkit-box; 145 display: flex; 146 -webkit-box-align: center; 147 align-items: center; 148} 149 150.contact-one__form .dropdown-toggle::after { 151 display: inline-block; 152 margin-left: .255em; 153 vertical-align: .255em; 154 content: "\f107"; 155 border: none; 156 font-family: 'Font Awesome 5 Pro'; 157 font-weight: 900; 158 font-size: 14px; 159 color: var(--thm-base); 160} 161 162.contact-one__form h3 { 163 margin: 0; 164 color: var(--thm-black); 165 font-size: 34px; 166 letter-spacing: -0.03em; 167 margin-bottom: 25px; 168} 169 170.contact-one__form p { 171 margin: 0; 172 font-size: 14px; 173 line-height: 32px; 174 color: #5f5f5f; 175 margin-bottom: 40px; 176}
20210817 13:56更新
上記rowの幅が理解できないのですがここが問題になっているのでしょうか。
ご連絡ありがとうございます。ということは、お渡ししたHTML/CSSのコード以外のコードが影響しているということですかね。
今投稿に写真追加したのですが、row要素の幅の見方が分かりません。
これが関係している可能性はありますでしょうか？
回答1件
0
ベストアンサー
button要素の中央寄せは以下の記述だけで再現できます。
html
1<div class="row"> 2 <div class="col-lg-12"> 3 <button>送信する</button> 4 </div> 5</div>
css
1.row{ 2 text-align: center; /* これが重要 */ 3} 4.col-lg-12{ 5 width: 100%; 6}
button要素のdisplayプロパティは標準ではinline-blockです。つまりインライン要素扱いなのでtext-alignが有効になります。
rowクラスにtext-alignが有効となっているのが確認できているのであれば、質問文外のどこかでbuttonのdisplayがinline-block以外、例えばblockに再指定されているのが一番可能性がありそうです。
（block要素にはtext-alignが適用されません）
buttonのdisplayプロパティの値、cssファイルのどの箇所で指定しているか調べてみてください。
投稿2021/08/17 07:52
総合スコア4447
hope_mucciさん
ご連絡ありがとうございます。
(button要素に限らず入力フォーム全体で中央寄りにしたいのですが、)buttonのdisplayプロパティはinline-blockで指定されており、HTMLでもrowクラスにstyle="text-align:center;"と追記しているのですが、それでもなぜか表示されません。。
あと質問ですが、追加情報の写真(投稿一番下)の通り、rowクラスの表示が2分割されているようです。これを1つに統合すれば治るのではないかと思っていますが、この写真だけで何か原因が分かりますでしょうか？
rowクラスをwidth100%にしてみてもダメでした。。
・回答内容の反映で中央寄せできていないのは、あなたの調査漏れが原因の可能性が非常に高いです。質問記載外の何かのCSSが期待通りの表示を妨げているのは間違いないので、付与したスタイルを外していきどのスタイルを外したら中央寄せになるか確認しましょう。これくらいの調査作業は自力できるようにならないと仕事になりません。
・下の画像において紫色の斜線部分はflex指定時の余白です。2分割されているわけではありません。
justify-contentなど、余白の分配方法を指定するプロパティで調整できます。
・おそらくbootstrapを使っていると思いますが、bootstrapのクラス指定でできることはbootstrapで行いましょう。通常のcssとチャンポンにすると不具合の原因が追えなくなります（最悪イチから作り直し）
ちなみに模写元と思われるサイトのcontactフォームの送信ボタンも左詰めですが、.rowにtext-alignをセットするだけで送信ボタンは中央寄せになりました。セットしたcssは状況により他所の記載で上書きされることがあることを念頭に置いて緻密に調査しましょう。
諸々細かく説明して頂きありがとうございます。仰る通り私の調査不足だと感じています、他要素が妨げになっていのであれば１つ１つクラスを見直してみます。flex要素まわりをもう少し調べて見ます。
あなたの回答
tips
プレビュー
