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

Question

我正在尝试创建一个页眉/导航栏，其中 Logo 的两侧都有导航选项，我希望所有导航选项都垂直居中。为此，我使用 <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;

Answer 1

要垂直居中某些内容，请在容器元素上应用 css 规则 display: table cell 以及 vertical-align: middle。