Vertically centered submit button without table

HTML & CSS
1 
<!doctype html>
<html> 
  <head>
    <meta charset="UTF-8">
    <title>search box6</title>
  </head>
 
<body>

<div>
<span><input type="text" style="width:500px;font-size:30pt;padding:2px; 
border:3px solid green" value="div text input"></span>
<span><input type="submit"  value=" div submit button " 
style="font-size:10pt;color:white;background-color:green;
border:2px solid #336600;padding:3px;[COLOR="Red"]vertical-align:middle[/COLOR]"></span>
</div>

<table>
  <tr>
    <td><input type="text" style="width:500px;font-size:30pt;padding:2px; 
border:3px solid green" value="table text input"></td>
    <td><input type="submit"  value=" table submit button " style="font-size:10pt;
color:white;background-color:green;border:2px solid #336600;padding:3px;"></td>
  </tr>
</table>

</body>
</html>

I have the code above at http://dot.kr/x-test/searchBox6.php (temperal URL) .
The page has two submit buttons.
The one is div submit button and the another is table submit button.

The table submit button is centered vertically while the div submit button is not exactly centered vertically.

How can I make the div submit button to be centered vertically without table ?
(Should I go back to table for it?)

2

Instead of the table, use <P> (or <DIV>s if you prefer ) for each row

like this: <DIV><input type=“text” style=“width:500px;font-size:30pt;padding:2px;
border:3px solid green; vertical-align:middle;” value=“table text input”>
<input type=“submit” value=" table submit button " style=“font-size:10pt;
color:white;background-color:green;border:2px solid #336600;padding:3px;”></DIV>