Vertical align issue inside a div

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/