Vertical Centering Help

by Kyle Mitofsky

HTML

<div id="header">
    <div id="logo">Logo</div>
    <form id="recherche" action="/" autocomplete="off">
        <label for="rechercher">Rechercher</label>
        <input type="text" name="recherche" />
    </form>
</div>








<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO question: <a href='http://stackoverflow.com/q/17426779/1366033'>Vertically align elements using CSS</a><br/>
    Find documentation: <a href='http://www.w3schools.com/cssref/pr_pos_vertical-align.asp'>CSS Vertical-Align</a>
<div>

CSS

body {
    margin:0;
    padding:0;
    font-size:100%;
}
#header {
    background-color:#303030;
    height:3em;
    line-height: 10px;
}
#logo {
    color:#EEEEEE;
    font-size:2em;
    line-height:1.5em;
    padding:0 30px 0px 10px;
    display:inline;
}
#recherche {
    color:#EEEEEE;
    font-size:1.5em;
    display:inline;
}
#recherche input {
    width:300px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius:4px;
    height: 24px;
    vertical-align: text-bottom
}