Mysterious "Padding" Around Text Input - html

Question

I have a page with a text input like the one you can see in this fiddle
Source
Easier to see on JSFiddle...
Notice how the input is slightly off vertical center when you first visit the page. Now click on the text input and watch a set of extra controls expand. Now the text input jumps up to perfect vertical center. Bluring the text input causes the controls to collapse and the text input is no longer at vertical center.
Note: the extra controls will not hide if you enter at least one letter in the text input.
Does anyone have any idea why the input won't stay at vertical center?
Thank you for your time.

Answer 1

It seems to be going off center because the "hidden" state of your controls, although not viewable, is still being rendered in the DOM. However, unlike your "active" state, the "hidden" state's width is declared as 0, causing all the elements to wrap together. This is affecting the vertical height of that element, causing the discrepancy.
I get what you're going for, but the current way you're setting up the CSS won't get you there I don't think. Your current way of centering is dependent entirely on the margin-top: 30px declared on your .options class. What would probably work better is wrapping both the .input and the .options class in a container class, and do your vertical centering there.
Here's an example of what I mean: http://fiddle.jshell.net/YuZHg/6/ (although you can still see the slight wrapping happening on the transition)

Answer 2

A far more solid way to center inline elements vertically is to set line-height to the same value as height.
Add this:
section.explore header {
line-height: 100px;
}
Remove this:
section.explore header div.input {
display: inline-table;
}
And change your <div>s to <span>s so both options and search bar are inline/inline-block elements.
jsFiddle
Of course your transitions are broken now and you'll need to use a different method.
EDIT: After a bit of fiddling I got it mostly working jsFiddle, mostly by removing a bunch of styles :P The width transition doesn't work yet though.

Answer 3

The main issue, by the looks of things is the height on your options div is adding to the container block and pushing down the input.
The css for this is :
section.explore header div.options {
-moz-transition: all .25s ease-in-out;
-ms-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
-moz-opacity: 0;
-ms-opacity: 0;
-o-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
opacity: 0;
display: inline-block;
height: 0;
margin-top: 33px;
max-height: 30px;
max-width: 0px;
overflow: hidden;
position: relative;
text-align: left;
width: 0px;
}
The problem is your a combination of the height, max-height.
There are much easier ways to achieve what you're trying though:
If you know the heights of each of the elements and responsive layout isn't a consideration, just position them accordingly using absolute positioning.
Here's a good article on vertical alignment:
http://css-tricks.com/centering-in-the-unknown/