Question

我有一个标题，可能包含或不包含图像/徽标，其大小可变。

无论徽标的大小如何，我都想在标题中垂直对齐导航菜单。

我已经尝试过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;
}

http://jsfiddle.net/benfosterdev/R247T/

Answer 1

将导航设置为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;
}

http://jsfiddle.net/R247T/2/

请注意，这也适用于较旧的浏览器。

Answer 2

您没有提及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%);
}

Updated fiddle

Answer 3

我以为我会把这个替代解决方案投入到混合中。您也可以通过绝对定位元素并使用margin: auto来垂直对齐（以及水平方向）。

这种方法唯一需要注意的是，您需要为链接导航指定高度和宽度。

nav {
    margin: auto 0;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    height: 40px;
}

可变高度标题内的垂直中心菜单

3 个答案:

Fiddle