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

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

我想垂直对齐标题中的导航菜单，而不考虑徽标的大小

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

标记：

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

---

将导航设置为位置：相对，将ul设置为位置：绝对，并将顶部设置为50%，边距顶部设置为其高度的一半。只要您的菜单有固定的高度，这项功能就会起作用。如果您需要一个浮动子菜单，您仍然可以将菜单ul设置为具有overflow:visible，但它必须具有固定的高度。如果你能做到这一点，你就是黄金

nav {
    position:relative;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position:absolute;
    left:10px;
    top:50%;
    height:26px;
    margin-top:-13px;
}

---

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

将导航设置为位置：相对，将ul设置为位置：绝对，并将顶部设置为50%，边距顶部设置为其高度的一半。只要您的菜单有固定的高度，这项功能就会起作用。如果您需要一个浮动子菜单，您仍然可以将菜单ul设置为具有overflow:visible，但它必须具有固定的高度。如果你能做到这一点，你就是黄金

nav {
    position:relative;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position:absolute;
    left:10px;
    top:50%;
    height:26px;
    margin-top:-13px;
}

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

您没有提到，但是如果我理解正确，使用

转换可能会起作用：

nav {
    position: absolute;
    top: 50%;
   -webkit-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

您没有提到，但是如果我理解正确，使用
转换可能会起作用：

nav {
    position: absolute;
    top: 50%;
   -webkit-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

我只是想把这个替代溶液加入混合物中。您还可以通过绝对定位元素并使用
margin:auto
垂直对齐（以及水平对齐）

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

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

我只是想把这个替代方案加入到混合物中。您还可以通过绝对定位元素并使用
margin:auto
垂直对齐（以及水平对齐）

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

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

在包装器上尝试
display:table
，然后在div-inside上尝试
vertical align:center
-在IE7中不起作用在包装器上尝试
display:table
，然后在div-inside上尝试
vertical align:center
-在IE7中不起作用您的小提琴链接只会转到我的原始小提琴。您的小提琴链接只会转到我的原始小提琴小提琴。如果没有图像，它将断裂，因为ul是绝对的。容器将是空的，在容器上使用最小高度：@navbarheight或填充：@navbarheight/2。我删除了图像，它仍然有效。我想这是因为他使用的是clearfix解决方案。正确，我们正在使用clearfix，因此标题将始终有一个高度。不，我很抱歉，但clearfix不是问题所在，您的标题有一个高度，因为它得到：padding:1em；Clearfix只对浮动元素有效，而不是绝对位置。你说得对，我错过了填充。仔细检查，然后清除：
处理浮动而不是绝对定位。按照您的建议添加一个最小高度可以解决这个问题，但是填充已经意味着它并不真正需要它。如果总是有一个图像，这可能永远不会成为问题。好主意。如果没有图像，它会中断，因为ul是绝对的。容器将是空的，在容器上使用最小高度：@navbarheight或填充：@navbarheight/2。我删除了图像，它仍然有效。我想这是因为他使用的是clearfix解决方案。正确，我们正在使用clearfix，因此标题将始终有一个高度。不，我很抱歉，但clearfix不是问题所在，您的标题有一个高度，因为它得到：padding:1em；Clearfix只对浮动元素有效，而不是绝对位置。你说得对，我错过了填充。仔细检查，然后清除：

处理浮动而不是绝对定位。按照您的建议添加一个最小高度可以解决这个问题，但是填充已经意味着它并不真正需要它。如果总是有一个图像，这可能永远不会成为问题。不过这是个好主意。