Vertical align issue inside a div - css

Question

I am trying to vertical align middle for my input and a tag element inside a div.
I have
<div id='title-container'>
<img id='logo' src='images/topLogo.png'>
<div id='search'><input type='text'><a id='btn' href='#'>test button</a></div>
</div>
I want to display something like
--------------------------------------------------------------------
| ---------------------------
| | topologic.png | my input box test button
| ---------------------------
|____________________________________________________________________
CSS
#title-container{
height: 80px;
vertical-align: middle;
background-color: yellow;
}
#search{
display: inline-block;
vertical-align: middle;
}
I want to vertical align my input box and test button inside my title-container div and float these two items to the right.
I have tried adding
#search{
display: inline-block;
vertical-align: middle;
float:right;
}
but those element will be on top of the title-container div instead of middle.. Can someone help me about it? Thanks.

Answer 1

The vertical-align property in CSS doesn't do what you'd expect. Typically, inline elements can be vertically aligned in their context via vertical-align: middle. But the context is the height of the text line they’re in, not the parent.
See http://phrogz.net/CSS/vertical-align/index.html

Answer 2

This should do the trick.
HTML:
<div id='title-container'>
<div id='logo'><img src='http://placehold.it/60x40' /></div>
<div id='search'>
<input type='text' />
<a id='btn' href='#'>test button</a>
</div>
</div>
CSS:
#title-container{
height: 80px;
}
#logo, #search {
display: inline-block;
height: 100%;
position: relative;
line-height: 80px;
float: right;
}
#logo {
float: left;
}
#logo img {
vertical-align: middle;
}
See the example.

Answer 3

When you want to play with vertical-align, you need to be aware that stuff like images have default vertical-align values set. This means, even though you set it to be middle for your parent container, it is being set as text-bottom on the image itself, by default.
You need to force it for all your elements inside that you want to act the same way:
http://jsfiddle.net/H9XBA/
#title-container img#logo,
#title-container #search { vertical-align: middle; }
... and it will vertically align :)

Answer 4

Generally, for logo's, I like wrapping them in a DIV and then adding an id to that DIV.
Another way you can vertically-align them to the middle is by using
display: table
for the parent div... and for the children that you want to align middle you put:
display: table-cell;
vertically-align: middle
You can check out an example here:
http://jsfiddle.net/combizs/QGg6P/