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

我应该如何尝试垂直对齐右侧的链接和徽标？
我想在不使用固定填充的情况下尝试这样做，因为如果我更新徽标或链接高度会让它变得很痛苦。

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

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/

Answer 2

您需要做的就是设置element.style

#header ul { top:0;}和#header { position: relative;}

Answer 3

这是我的解决方案，不需要定位，高度等，只需根据您的意愿调整垂直对齐，顶部，中间，底部或基线等（我使用高度：#header-container的300px更容易说明vertical-align: middle;

#header > a { background: red; }
ul { background: green; }
#header-container { background: blue; height: 300px; }

#header > a, ul { display: block; }
li { display: inline-block; }
#header > a { float: left; }
ul { float: right; font-size: 200%; }
#header-container { display: table; width: 100%; }
#header { display: table-cell; vertical-align: middle; }

也不需要在CSS表中清除浮点数。

Answer 4

<强> HTML

<div id="header">
    <a href="./" class="logo"><img src="http://www.google.co.in/images/srpr/logo3w.png" alt=""></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>

<强> CSS

#header { position: relative; background: #ddd; }
#header a.logo {display: inline-block; vertical-align: middle; *display: inline; zoom: 1;}
#header ul { display: inline-block; vertical-align: middle; *display: inline; zoom: 1; position: absolute; right: 0px; top: 50%; height: 20px;}
#header ul li { display: inline; position: relative; top: -50%;  }

示例：http://jsfiddle.net/gZceQ/4/

上面的代码应该适用于所有浏览器：）

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

4 个答案: