2

垂直对齐东西似乎是一门黑暗的艺术。这是我当前站点代码的一部分（特别是标题）。该网站的编码是这样的，以使页脚停靠在页面底部。

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; }​

这是一个 JSFiddle 示例

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

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

4

4 回答 4

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/

于 2012-10-09T12:24:59.607 回答
0

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

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

于 2012-10-09T12:17:30.397 回答
0

这是我的解决方案，不需要定位，高度等，只需根据需要调整垂直对齐，顶部，中间，底部或基线等（我使用高度：300px#header-container来更容易地说明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 表中清除浮动。

于 2012-10-09T12:46:54.823 回答
0

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/

上面的代码应该适用于所有浏览器:)

于 2012-10-09T13:18:05.577 回答