élément Div pas d'aligner au milieu d'un autre élément div

Question

Ceci est mon balisage de la page pertinente:

<div id="header"> 
    <div id="logo"> 
     <a href="/">Home</a> 
    </div> 
    <div id="user_box"> 
     test 
    </div> 
</div> 

Et mon CSS pertinente:

#header { 
    width: 960px; 
    height: 110px; 
} 

#logo { 
    background: url('/assets/img/logo.png') no-repeat center; 
    width: 300px; 
    height: 110px; 
    float: left; 
} 


#user_box { 
    width: 300px; 
    height: 60px; 
    float: right; 
    vertical-align: middle; 
} 

Maintenant, je veux placer le user_box div dans le milieu vertical du div header. Après beaucoup de Google et d'expérimentation, j'ai appris que ce n'est pas facile. Apparemment, je ne peux pas aligner verticalement un élément de bloc tel qu'un div. Donc je cherche une autre façon de faire ça.

J'ai vu la méthode hacky display: table; et j'ai essayé de l'utiliser, mais cela n'a rien changé. Aussi essayé de changer l'élément à un élément en ligne comme un span, mais cela n'a pas fonctionné non plus. J'ai même essayé d'utiliser margin: auto 0; pour une raison terrible, et cela n'a pas fonctionné du tout.

Alors je demande de l'aide. Comment puis-je aligner verticalement ce div à l'intérieur de mon div en-tête?

Merci!

Answer 1

Réglez la hauteur de ligne de user_box égale à la hauteur de header

démonstration de travail: http://jsfiddle.net/AlienWebguy/pyppD/

Answer 2

alignement vertical ne fonctionne pas avec son divs pour aligner des éléments dans les tableaux. Dans votre cas, vous pouvez simplement utiliser ce

#user_box { margin-top:25px; } /*110-60 = 50/2 = 25*/ 

Answer 3

Je tripoté autour de votre code un peu, et voici ce que je suis: http://jsfiddle.net/3k8XE/

Comme vous pouvez le voir, je suis en utilisant une table comme l'en-tête et en appliquant le même id à chaque élément, sauf que les deux divs internes ont changé en td. J'ai ajouté un td interne pour compenser l'espace entre les deux divs car ils ont été réglés à l'origine pour flotter: gauche/droite.

(Bien sûr, les frontières sont juste pour montrer ce qui se passe réellement ici.)