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

时间:2014-03-06 13:56:13

标签: css

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

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

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

3 个答案:

答案 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;
}

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

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

答案 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%);
}

Updated fiddle

答案 2 :(得分:1)

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

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

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

Fiddle