可变高度标题内的垂直居中菜单答案

【问题标题】：Vertically center menu within variable height header可变高度标题内的垂直居中菜单
【发布时间】：2016-02-15 21:21:01
【问题描述】：

我有一个标题，它可能包含也可能不包含图像/徽标，并且其大小是可变的。

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

我已经尝试了使导航垂直居中的幽灵元素技巧，但无法使其正常工作。我认为这可能是由于徽标被浮动。

标记：

<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/

【问题讨论】：

在包装器上尝试display:table，然后在内部的 div 上尝试vertical-align:center - 在 IE7 中不起作用

标签： css

【解决方案1】：

将 nav 设置为 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/

请注意，这也应该适用于旧版浏览器。

【讨论】：

如果没有图像则会中断，因为 ul 是绝对的，容器将为空，请在容器上使用 min-height:@navbarheight 或 padding:@navbarheight/2。
我删除了图像，它仍然有效。我认为这是因为他使用的是 clearfix 解决方案。 jsfiddle.net/R247T/6
正确，我们使用 clearfix 所以标题总是有一个高度。
不，我很抱歉，但 clearfix 不是问题，你的标题有一个高度，因为它得到：padding: 1em; jsfiddle.net/R247T/7 Clearfix 仅适用于非绝对定位的浮动元素
你说得对，我错过了填充。仔细检查，clear: 确实处理浮动而不是绝对定位。按照您的建议添加最小高度可以修复它，但是已经存在的填充意味着它并不真正需要它。如果总是有图像，它可能永远不会成为问题。不过很好。

【解决方案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

【讨论】：

【解决方案3】：

只是想我会将这个替代解决方案加入其中。您还可以通过绝对定位元素并使用margin: auto 垂直对齐（和水平对齐）。

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

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

Fiddle

【讨论】：

你的小提琴链接只是我原来的小提琴。