How To: Vertically Align Google Custom Search Engine in WordPress Navigation Bar

I finally got my Google custom search engine (see top right) to align vertically in the navigation bar of my WordPress blog!

And now my life can move forward…

When I first added the CSE, the alignment was pinning the search engine to the top of the nav bar – and it was absolutely driving me crazy.

So after a solid 4(+) hours of tweaking, I finally figured out how to align the search engine (and the search button) vertically.

Here’s how I did it:

All of the coding was done within the the “theme > templates > header.php” and here’s the code that is now making it work great for me:

<!– searchbox START –>
<div style=”display: table; height: 32px; width: 250px; background: #fff; _position: relative; overflow: hidden;”>
<div style=” _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;”>
<p style=” _position: relative; _top: -50%”><form action=”https://socialmediaseo.net/search-results” id=”cse-search-box”>
<div>
<input type=”hidden” name=”cx” value=”xxxxxxxxxxxxxxxx:xxxxxxxx” />
<input type=”hidden” name=”cof” value=”FORID:11″ />
<input type=”hidden” name=”ie” value=”UTF-8″ />
<input type=”text” name=”q” size=”25″ />&nbsp;&nbsp;<input type=”submit” name=”sa” value=”Search” /></div></form>
<script type=”text/javascript” src=”http://www.google.com/cse/brand?form=cse-search-box&lang=en”></script></div></div>
<!– searchbox END –>

Here are the elements that are driving the actual vertical alignment so nicely:

<div style=”display: table; height: 32px; width: 250px; background: #fff; _position: relative; overflow: hidden;”>
<div style=” _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;”>
<p style=” _position: relative; _top: -50%”>

and then of course the 2 close div’s: </div></div>