Q&A
C
は本件とは無関係では
実現したいこと
入力フォームとクレジット決済のセレクトフォームを画面の中央に揃えたいです。
試したこと。
ｃｓｓに text-align: center;の追加または、 margin: auto;の追加または、.form {
margin: 0 auto;
}
の３つを１つずつ（同時ではない）追加して試しましたが、付属画像のように左寄りになっていて、真ん中に行きません。
どうしたらよいでしょうか？ご教授お願い致します。。
html
1<!DOCTYPE html> 2 3<html> 4 5<head> 6<meta content="text/html; charset=utf-8"/> 7 8 <title>お問い合わせ</title> 9 <link rel="stylesheet" href="syoki.css"> 10 11 <script type="text/javascript" src="jquery.min.js"></script> 12<script type="text/javascript"> 13 14 15 16 17 18 19 20 </script> 21 22 23 24 25 26 27 28<?php echo "<ul>";foreach($errors as $value) { 29 30echo "<li>"; 31echo $value; 32echo "</li>"; 33} 34 35echo "</ul>"; 36 37?> 38 39</head> 40 41<body> 42 43 44<form action ="hpform1.php" method ="post"> 45 46<table> 47<tr> 48 49 50 51<th>名前：※</th><td><input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>"/></td> 52</tr> 53<tr> 54 55 56<th>フリガナ：※</th><td><input type="text" class="furigana" name="furigana" id="furigana" value="<?php if(isset($furigana)){ echo $furigana; } ?>"/></td> 57</tr> 58 <tr> 59 60<th>電話番号：※</th><td><input type="text" class="tel" name="tel" id="tel" value="<?php if(isset($tel)){ echo $tel; } ?>"/></td> 61</tr> 62 <tr> 63 64<th>メールアドレス：※</th><td><input type="text" class="email" name="email" id="email" value="<?php if(isset($email)){ echo $email; } ?>"/></td> 65</tr> 66 <tr> 67 68 <td> 69 <div class="b c font25 span lt_004 w95 cm"><span></div> 70 71<div class="select_date font22"> 72 73<table><tbody><tr> 74 75 <td class="fontSS"> 76 <table><tbody><tr class="time_list2"> 77 <td> 78 79 80 81 82 <td> 83 <div class="wrap"> 84 85 86 <select id="input_time1" class="pay" name="pay"> 87 <option value="">支払方法</option> 88 <option value="クレジットカード"<?php if(isset($pay) && $pay==="クレジットカード") { echo "selected" ;} ?>>クレジットカード</option> 89 <option value="銀行振込"<?php if(isset($pay) && $pay==="銀行振込") { echo "selected" ;} ?>>銀行振込</option> 90 91 </select> 92 </div> 93 94 </tr></tbody></table> 95 </td> 96 </tr></tbody></table> 97 </div> 98 99 100 </td> 101</tr> 102 103 <tr> 104 105 106 107 108 109 110 111 112 113 <tr><td colspan="2"><input type ="submit" name ="submit"value="確認画面へ"></td></tr> 114 115 116 117 118 119 120 121<footer class="relative z3"> 122 <div class="copyright contents1800 back_gray2"> 123 <p><a href="/law/">特定商取引法に基づく表記</a>・<a href="/law/#privacy">プライバシーポリシー</a><span class="hidden600"> | </span><br class="visible600">Copyright. All Rights Reserved.</p> 124 </div> 125</footer> 126</form> 127 </body></html> 128 129 130 131 132
syoki.css
css
1/* 入力フォームのスタイル */ 2 3.form { 4 margin: 0 auto; 5 6} 7 8.name { 9 10 border: 2px solid #63e02d; /* 枠線 */ 11 padding: 0.5em; /* 内側の余白量 */ 12 background-color: snow; /* 背景色 */ 13 width: 20em; /* 横幅 */ 14 height: 120px; /* 高さ */ 15 font-size: 1em; /* テキスト内の表示文字サイズ */ 16 line-height: 1.2; /* 行の高さ */ 17 margin: auto; 18 19 20} 21 22.furigana { 23 24 border: 2px solid #63e02d; /* 枠線 */ 25 padding: 0.5em; /* 内側の余白量 */ 26 background-color: snow; /* 背景色 */ 27 width: 20em; /* 横幅 */ 28 height: 120px; /* 高さ */ 29 font-size: 1em; /* テキスト内の表示文字サイズ */ 30 line-height: 1.2; /* 行の高さ */ 31 text-align: center; 32} 33 34 35.tel { 36 37 border: 2px solid #63e02d; /* 枠線 */ 38 padding: 0.5em; /* 内側の余白量 */ 39 background-color: snow; /* 背景色 */ 40 width: 20em; /* 横幅 */ 41 height: 120px; /* 高さ */ 42 font-size: 1em; /* テキスト内の表示文字サイズ */ 43 line-height: 1.2; /* 行の高さ */ 44 45} 46 47.email { 48 49 border: 2px solid #63e02d; /* 枠線 */ 50 padding: 0.5em; /* 内側の余白量 */ 51 background-color: snow; /* 背景色 */ 52 width: 20em; /* 横幅 */ 53 height: 120px; /* 高さ */ 54 font-size: 1em; /* テキスト内の表示文字サイズ */ 55 line-height: 1.2; /* 行の高さ */ 56 57} 58 59.pay { 60 61 border: 2px solid #63e02d; /* 枠線 */ 62 padding: 0.5em; /* 内側の余白量 */ 63 background-color: snow; /* 背景色 */ 64 width: 20em; /* 横幅 */ 65 height: 120px; /* 高さ */ 66 font-size: 1em; /* テキスト内の表示文字サイズ */ 67 68 line-height: 1.2; /* 行の高さ */ 69 text-align: center; 70 71 72} 73 74
回答ありがとうございます。一番下のほうとかですよね?そうですね。ただ、入力フォームはth〜tdで囲みたいです。
マジですか……
問題を把握しました。
回答1件
0
ベストアンサー
厳密に真ん中は厳しいと思います。
css
1form > table { 2 width: 100%; 3 table-layout: fixed; 4} 5tr::after { 6 content: ""; 7 display: table-cell; 8 width: 33.33%; 9} 10th, 11td { 12 width: 33.33%; 13} 14td { 15 text-align: center; 16}
投稿2021/04/15 09:29
総合スコア36981
回答ありがとうございます。やっぱり厳しいですか。上記のコード試してみましたが、なんか少しずれますね。テーブル使うのやめようと思います。
<div class="auto-style1">
<input type～～
<style>
.auto-style1 {
margin: auto;
text-align: center;
}
</style>
上記のコードにすることにしました。
回答ありがとうございます。
あなたの回答
tips
プレビュー
