垂直和水平对齐另一个div内的两个内联div ...并且很好地折叠它们

Question

好的，所以这个问题会被遍及各个网站，包括多次在这个网站上。但我似乎无法将答案反映给别人的问题。所以这是我的具体案例：

<div class="logo-align_container">
    <div class="logo_image">
        <img src="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>

如何在logo_image内垂直和水平居中logo_text和logo-align_container？每当我应用分散在网络上的修补程序时，我设法将div水平居中，但logo_text将始终在logo-align_container的顶部对齐，而我无法重新定位它。

此外，图像和文本构成了页面的相当一部分。如果窗口太小而无法将它们定位为内嵌（它们当前是两个float: left 上的.clearBoth { clear: both; }，我想让它们崩溃，以便logo_text低于logo_image（到目前为止已经发生），但同时也是水平和垂直对齐。如果这不是解决第一个问题的一部分，那么'如果可以单独完成，那真的很棒。

如果我必须给logo-align_container一个固定的高度，它将是532px。

感谢您的时间！

编辑：wheresrhys的解决方案几乎达到了标记。以下是我希望它完成的事情：http://i.imgur.com/BhHMv.png

Answer 1

这个小提琴演示了一个解决方案：http://jsfiddle.net/wheresrhys/t6pUq/使用display:inline-block

几点

1. 它不会在ie7及以下版本中工作，因为默认情况下display:inline的元素不支持内联块。在这种情况下，一个不错的回退是使用display block然后在logo_wrapper上设置margin: x auto 0，其中x是一个将徽标和标题大致放在垂直中心的值。
2. 我稍微修改了html - 需要在需要居中的所有元素周围添加包装，并且注释也会阻止空白影响inline-block元素的定位。