テキスト入力をボックスの位置の真ん中にしたいです

Question

テキスト入力する欄を真ん中にしたいです

tdの上の方にテキストが寄って行ってしまいます

該当のソースコード

    <table  align="center">
    <tr>
       <th>お名前</th>
       <td><form><input type="text" name="namae"class="text" size="40" maxlength="20"placeholder="例）橋本　太郎"></form><br></td>
     </tr>
     <th>ふりがな</th>
     <td><form><input type="text" name="namae"class="text" size="40" maxlength="20"placeholder="例）はしもと　たろう"></form><br></td>
   </tr>
     <tr>
        <th>E-mail</th>
        <td><form><input type="text" name="namae"class="text" size="40" maxlength="20"placeholder="例）●●[e-mail]"></form><br></td>
      </tr>
      <th>電話番号</th>
      <td><form><input type="text" name="namae"class="text" size="40" maxlength="20"placeholder="例)000-XXXX-1234"></form><br></td>
    </tr>
    <th>お問い合わせ内容</th>
    <td><p><textarea name="msg" cols="30" rows="7"placeholder="ご質問等ご入力ください"></textarea></p></td>
  </tr>

   </table>

<form>
   <p><input class="sousin" type="submit" value="送信する"></p>
  </form>

.title{
  color: #000008;
  font-size: 240px;
  letter-spacing: 0.1em;/*文字間のスペース*/
  font-weight: 300;
  position:absolute; top:380px; left:180px;


}
.midasi{
font-family: serif;
margin: 1200px 0px 100px 0px;
padding: 50px 0px 80px 0px;
color:#FFFFFF;
background-color: #8d4747;
text-align: center;
font-size: 40px;
}

body{
background-color: #FFFFFF;
}

table{
color: #000000;
font-family: serif;
border-spacing:5px;
}

th{
  color: #000000;
  font-family: serif;
  font-size: 30px;
  background-color: #FFFFFF;
  word-break: break-all;
	border: 3px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px;			/*ボックス内の余白*/
  vertical-align: middle;
  width: 20%;
}

td{
  color: #000000;
  font-family: serif;
  font-size: 30px;
  background-color: #FFFFFF;
  word-break: break-all;
	border: 3px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	padding: 0px;			/*ボックス内の余白*/
  vertical-align: middle;
}





input, select, textarea {
  font-family: serif;
font-size: 100%;
color: #000000;
}


form > p{
  font-family: serif;
    text-align: center;
    padding:75px 0px 200px 0px;
}


.sousin{
  background-color: gold;
  font-size: 12px;
  border-radius: 5px;
  border-bottom: solid 3px goldenrod;
  box-shadow: 3px 3px 3px gray;
  transition: 0.3s;
  text-align: center;
  vertical-align: middle;
  padding: 30px;
  font-size: 30px;
}

.sousin:active {
  transform: translateY(2px);
  border-bottom: none;
}

.sousin:hover {
  background-color: orange;
}


textarea {
width: 1050px;
height: 7em;
}

.text{
  border: 1px solid #ccc;
  vertical-align: middle;
  position: left;
}

Answer 1

質問以前に色々マークアップがまずい気がする…置いておいて。

↓</td>前の<br>はなぜついているのですかね？(formもだけど…)

<td><form><input type="text" name="namae"class="text" size="40" maxlength="20"placeholder="例）はしもと　たろう"></form><br></td>

.textのheightが単純に足りないのでは？

.text{
  border: 1px solid #ccc;
  vertical-align: middle;
  position: left;
  height: 40px;
}

Comments

[tsuyoshin]

ほんとでした全く気付かなかったです…いらないところを削除したら治りました…ご教授ありがとうございます！！