我有一个标题,可能包含或不包含图像/徽标,其大小可变。
无论徽标的大小如何,我都想在标题中垂直对齐导航菜单。
我已经尝试过ghost元素技巧来垂直居中导航但无法让它工作。我想这可能是因为徽标浮动了。
标记:
<header class="cf">
<div class="brand">
<img src="http://placehold.it/200x100"/>
</div>
<nav>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
</header>
CSS:
header {
background-color: #f0f0f0;
padding: 1em;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.brand {
float: right;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
margin-right: 0.25em;
}
答案 0 :(得分:2)
将导航设置为position:relative,将ul设置为position:absolute,并将其设置为50%的顶部,以及它的高度的一半的margin-top。只要您的菜单具有固定高度,这将起作用。如果你需要一个浮动子菜单,你仍然会很好,因为你可以设置菜单ul有溢出:可见,但它必须有一个固定的高度。如果你能做到这一点,你就是金色的。
nav {
position:relative;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
position:absolute;
left:10px;
top:50%;
height:26px;
margin-top:-13px;
}
请注意,这也适用于较旧的浏览器。
答案 1 :(得分:1)
您没有提及browser support,但如果我理解正确,可以使用transform
:
nav {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
答案 2 :(得分:1)
我以为我会把这个替代解决方案投入到混合中。您也可以通过绝对定位元素并使用margin: auto
来垂直对齐(以及水平方向)。
这种方法唯一需要注意的是,您需要为链接导航指定高度和宽度。
nav {
margin: auto 0;
position: absolute;
top: 0;
bottom: 0;
width: 100px;
height: 40px;
}