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

Question

I'm trying to create a header/nav bar where there will be navigation options on either side of a logo, which I would like all to be vertically centered. To achieve this, I'm using <li> and <li class> elements, but am having little luck with the vertical centering. Any ideas?

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 。

Answer 2

如果链接和图像位于同一元素（例如div）中，则可以将图像设置为使用样式标签：vertical-align：middle;

Answer 3

position relative the header. position absolute the image. left: 50%; the image