垂直对齐事物似乎是一门黑暗艺术。这是我的当前站点代码的一部分(特别是标题)。该网站的编码方式如下,与停靠在页面底部的页脚有关。
.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 Exmple
我应该如何尝试垂直对齐右侧的链接和徽标?
我想尝试在不使用固定填充的情况下执行此操作,因为如果我更新徽标或链接高度,它会很痛苦。
那么,在这种情况下垂直对齐的正确方法是什么?
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/
您需要做的就是设置 element.style
#header ul { top:0;}
和 #header { position: relative;}
的解决方案,不需要定位、高度等,只需根据需要调整垂直对齐,顶部、中间、底部或基线等(我使用高度: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 表中。
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/
上面的代码应该适用于所有浏览器:)