Vertically align elements using CSS

Question

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>

It's a form, not a label. – user2542737 Jul 03 '13 at 10:19 — user2542737, Jul 03 '13 at 10:19

score 0 · Answer 1 · answered Jul 02 '13 at 13:32

0

here is a solution that works fine: you can add line-height:size_px to each element that you want it's children to be aligned vertically. (e.g. size_px := 10px). The line-height should be the same as the parent height (height).

try:

jsfiddle.net/rjCBR/

answered Jul 02 '13 at 13:32

vlio20

8,955
18
95
180

This is a poor solution if there's a possibility that the elements might wrap. – cimmanon Jul 02 '13 at 14:27

score 0 · Answer 2 · answered Jul 02 '13 at 13:36

0

Replace body and #header of your css with the following code:

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

#header {
background-color:#303030;
height:3em;
display: table-cell;
vertical-align: middle;
}

answered Jul 02 '13 at 13:36

Fabio S

1,124
6
8

KyleMit · Answer 3 · 2013-09-01T06:25:31.107

0

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

height: 24px;
vertical-align: text-bottom;

jsFiddle

edited Sep 01 '13 at 06:25

answered Jul 02 '13 at 13:47

KyleMit

30,350
66
462
664

Remember to upvote good answers and mark as accepted the best answer, not just here but in future discussions as well to promote the best possible content. – KyleMit Jul 03 '13 at 12:42

Vertically align elements using CSS

3 Answers3

jsFiddle

Linked