导航中间的标志 - 如何垂直居中答案

【问题标题】：logo in middle of navigation - how to vertically center导航中间的标志 - 如何垂直居中
【发布时间】：2012-12-20 07:12:04
【问题描述】：

我正在尝试创建一个标题/导航栏，其中徽标的两侧都有导航选项，我希望所有导航选项都垂直居中。为此，我使用了<li> 和<li class> 元素，但在垂直居中时运气不佳。有什么想法吗？

HTML

<header>
    <nav>
        <ul>
            <li class="btn"><a href="#"><span>01</span>Home</a></li>
            <li class="btn"><a href="#"><span>02</span>Vendors</a></li>
            <li><a href="#"><img src="img/logo.png" alt="sews logo" /></a></li>
            <li class="btn"><a href="#"><span>03</span>Tickets</a></li>
            <li class="btn"><a href="#"><span>04</span>Blog</a></li>
        </ul>
    </nav>
</header>

CSS

nav {
    margin: 40px auto;
    width: 600px;
    padding-bottom: 80px;
}

nav ul li {
    display: inline;
}

nav ul li a {
    margin:0 10px;
}

nav ul li.btn a {
    padding-top: -10px;
}

nav ul li a span {
    color: #e3c22a;

font-family: fanwood;

}

【问题讨论】：

你可以试试margin-top:50%。
互联网上最有用的页面之一：w3.org/Style/Examples/007/center.en.html
@EL 我希望这很容易；不走运:(
这些技术中的任何一个对您有帮助吗？ css-tricks.com/snippets/css/…

标签： html css navigation html-lists

【解决方案1】：

要垂直居中，在容器元素上应用 css 规则 display: table cell 和 vertical-align: middle。

【讨论】：

在什么情况下？（vertical-align: middle 是属于 .btn 还是属于整个 nav？）
它属于nav。它被应用于容器元素（请参阅我在 cmets 中提到的文章）
知道了。我已经实施了您推荐的编辑，但没有发现任何变化。有任何想法吗？ jsfiddle.net/6smrF
我已更新 jsfiddle.net/6smrF/9 以显示我所看到的；所有内容仍然在底部对齐并向左移动。
所以那里发生的事情是，它将所有 lis 的大小调整为与图像相同，但没有对齐其中的文本（从我的 lis 中删除显示和对齐刚刚添加到我即将链接的小提琴中，你会明白我的意思）。要将所有内容居中，您需要将 display 和 alignment 属性应用于 nav 和 lis（请参阅jsfiddle.net/6smrF/17）

【解决方案2】：

如果链接和图片在同一个元素中，比如一个div，你可以设置图片使用样式标签：vertical-align: middle;

【讨论】：

【解决方案3】：

position relative 标头。 position absolute 图片。 left: 50%;图片

【讨论】：

垂直居中，而不是水平。