Vertically align elements using CSS

Profile picture for user2542737
user2542737

I just want to vertically align elements in my header. That would be really easy with tables but can't figure how to do it with CSS. I want to vertically align all 3 elements withing the black bar : "Logo", "Rechercher" and the text input.

Here is the CSS:

body {
margin:0;
padding:0;
font-size:100%;
}

#header {
background-color:#303030;
height:3em;
}

#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;
}

And the HTML :

<!DOCTYPE html>
<html>
  <head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="css/mainframe.css">
 </head>
 <body>
  <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>
 </body>
</html>

Using Vertical-align: middle;, as other have suggested, aligns the bottom of the text for each element, which looks odd for an input box where the bottom of the actual element will be substantially below the text.

Try adding the following properties to the input css

<!-- language: lang-css --> 
height: 24px;
vertical-align: text-bottom;

jsFiddle