Trying to align input field - html

Question

I'm having some trouble trying to align this input field. Here is the screenshot
http://i255.photobucket.com/albums/hh140/testament1234/input_zps68391b01.png
Here is my HTML -
<div class="four columns search_box">
<form>
<input type="text" placeholder="SEARCH"/>
</form>
</div>
CSS -
.search_box input{
display:block;
vertical-align:middle
}
I have tried adding line-height but that seems incorrect. The height of container is 90px
Here is the Markup for the Header
<div class="container">
<header>
<div class="twelve columns">
<h1 ><a class="logo" href="#" title="My Phone">my | phone</a></h1>
<ul class="menu">
<li>press</li>
<li>downloads</li>
<li class="noborder"><span>stores</span></li>
</ul>
</div>
<!--SEARCH BOX -->
<div class="four columns search_box">
<form>
<input type="text" placeholder="SEARCH"/>
</form>
</div>
</header>
</div>

Answer 1

I presume that your logo is supposed to sit above the menu and the search box.
Given that, I'd suggest having the logo inside a div class="sixteen columns" and then having the menu inside a <div class="twelve columns"> so it fits the grid alongside the <div class="four columns"> on the next row. Like this:
<div class="container">
<header>
<!--LOGO-->
<div class="sixteen columns">
<h1 ><a class="logo" href="#" title="My Phone">my | phone</a></h1>
</div>
<!--NAVIGATION -->
<div class="twelve columns">
<ul class="menu">
<li>press</li>
<li>downloads</li>
<li class="noborder"><span>stores</span></li>
</ul>
</div>
<!--SEARCH BOX -->
<div class="four columns search_box">
<form>
<input type="text" placeholder="SEARCH"/>
</form>
</div>
</header>
</div>
Then it's just CSS tweaks to line up the menu text with the search text.
I've put it into a fiddle here: http://jsfiddle.net/davidpauljunior/YR7Em/