aligner verticalement et horizontalement deux div en ligne dans un autre div… et bien les réduire - css, html, alignement vertical, alignement

D'accord, cette question est donc posée partout sur les sites Web, y compris plusieurs fois sur ce site. Mais je ne peux pas "sembler appliquer les réponses aux autres" problèmes aux miens. Alors voici mon cas spécifique:

<div class="logo-align_container">
<div class="logo_image">
<img src="/images/images/logo.png" />
</div>
<div class="logo_text">
<div class="site_name">
<h1>foo</h1>
</div>
<div class="site_slogan">
<h2>bar</h2>
</div>
</div>
<br class="clearBoth" />
</div>

Comment je centre logo_image et logo_text verticalement et horizontalement dans logo-align_container? Chaque fois que j'applique les correctifs éparpillés sur le Web, je parviens à centrer les divs horizontalement, mais logo_text sera toujours aligné au sommet de logo-align_containeret rien que je puisse faire ne le repositionne.

De plus, l'image et le texte constituent une partie considérable de la page. Lorsque la fenêtre est trop petite pour être positionnée en ligne (qu'ils sont actuellement, par le biais de float: left sur les deux et .clearBoth { clear: both; }, Je "aimerais les voir s'effondrer pour que logo_text tombe en dessous de logo_image (ce qui se passe déjà jusqu’à présent) mais aussique les deux sont toujours alignés horizontalement et verticalement. Si cela ne fait pas partie de la solution au premier problème, il serait vraiment génial de le faire séparément.

Si je devais donner logo-align_container une hauteur fixe, il serait 532px.

Merci pour votre temps!

EDIT: où la solution "semble" presque aboutir. Voici ce que cela ne produit pas, ce que je voudrais qu'elle fasse: http://i.imgur.com/BhHMv.png

Réponses:

Ce violon démontre une solution: http://jsfiddle.net/wheresrhys/t6pUq/ en utilisant display:inline-block

Quelques points

1. Il ne fonctionnera pas dans ie7 et les versions antérieures, car inline-block n'est pas pris en charge sur les éléments ayant display:inline par défaut. Une solution de rechange décente dans ce scénario consisterait à utiliser le bloc d'affichage, puis à définir margin: x auto 0 sur logo_wrapper, où x est une valeur qui place le logo et le titre à peu près au centre vertical.
2. J'ai légèrement modifié le code HTML - il est nécessaire d'ajouter un wrapper autour de tous les éléments devant être centrés. inline-block élément.