html - 在这种情况下垂直对齐的正确方法是什么？

Question

垂直对齐东西似乎是一门黑暗的艺术。这是我当前站点代码的一部分(特别是标题)。该站点的编码与页脚停靠在页面底部有关。

HTML:

<div id="header-wrap" class="full_width">
  <div id="header-container" class="dc1">
    <div id="header" class="thin_width rel">
      <a href="/"><img src="/static/img/header.jpg" id="logo" alt="coming soon" title="coming soon"></a>
      <ul>
        <li><a href="/posts/list/">Link 1</a></li>
        <li><a href="/posts/create/">Link 2</a></li>
        <li><a href="/about">Link 3</a></li>
      </ul>
    </div>
  </div>
</div>

CSS:

#header-wrap { top: 0; left: 0; }
#header-container { height: 60px; border-bottom: 1px solid #E5E5E5; }
#header { margin: 0 auto; }
#header h1 { color: #beffbf; text-align: left; width: 290px; margin: 0; position: absolute; left: 0; top: 20px; }
#header h1 em { color: #90b874; font-size: small; display: block; }
#header ul { margin: 0; padding: 0; list-style: none; position: absolute; top: 35px; right: 0; }
#header ul li { float: left; margin-right: 5px; }
#header ul li a{ color: #90b874; font-weight: bold; font-size: 1.4em; margin-right: 5px; text-decoration: none; }
#header ul li a:hover { color: #beffbf;  }
.dc1 { background-color: #FFFFFF; }
.rel { position: relative; }
.full_width { width: 100%; }
.thin_width { width: 450px; }​

Here's a JSFiddle Exmple

我应该如何尝试垂直对齐右侧的链接和 Logo ？
我想尝试在不使用固定填充的情况下执行此操作，因为如果我更新 Logo 或链接高度，这会让我很痛苦。

那么，在这种情况下垂直对齐的正确方法是什么？

Answer 1

display:table-cell 对此效果很好

#header-wrap { top: 0; left: 0; }
#header-container { height: 60px; border-bottom: 1px solid #E5E5E5; display:table-cell; vertical-align:middle; }
#header { margin:0 auto; overflow:auto;}

查看演示 http://jsfiddle.net/AHsBN/2/