The green background submit button

HTML & CSS
1 
<!doctype html>
<html> 
  <head>
    <meta charset="UTF-8">
    <title>search box1</title>
  </head>
 <body>
<div style="text-align:center">
<input type="text" style="width:500px;font-size:13pt;padding:2px; border:3px solid green" value="example text">
<input type="submit"  value=" submit " style="font-size:7pt;color:white;background-color:green;border:2px solid #336600;padding:3px">
</div>
</body>
</html>

I have the code above at http://dot.kr/x-test/searchBox1.php (temperal URL) .

If you click the link above with major browsers, you will see a search box and a green background submit button.
If you see them carefully, the green background submit button is a little lower than the search box vertically.

I like to put the vertical position of the submit button a little upper, so it is positioned vertically centered compared with the position of the search box .

2

you might have to use position to put the 2 inline elements exactly where you want them

3

As I try it like the code below, I think it won’t work as I expected at http://dot.kr/x-test/searchBox2.php .

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>search box2</title>
  </head> 
<body>
<div style="text-align:center">
<input type="text" style="width:500px;font-size:13pt;padding:2px; border:3px solid green" value="search box">
<input type="submit"  value=" submit button " style="font-size:7pt;color:white;
background-color:green;border:2px solid #336600;padding:3px;[COLOR="Red"]margin-bottom:30px[/COLOR]">
</div>
</body>
</html>
4

yep, using margin didn’t work in all my browsers either, but using position to put the elements where I want did.

5

Sorry to say, How can I use position the 2 inline elements in code?

6

The code below seems not to work as I expected at http://dot.kr/x-test/searchBox3.php

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>search box3</title>
  </head>
<body>
<div style="text-align:center">
<input type="text" style="width:500px;font-size:13pt;padding:2px; border:3px solid green" value="search box">
<input type="submit"  value=" submit button " style="font-size:7pt;color:white;
background-color:green;border:2px solid #336600;padding:3px;[COLOR="Red"]display:inline[/COLOR]">
</div>
</body>
</html>

How can I fix the code above?

7

Try this…
add: " vertical-align:middle;" to the style for text input button…