html - 在导航列表中居中图像(垂直)

Question

我正在尝试创建一个响应式导航列表，并将图像置于页面列表的中心

我已经设法接近那个，但是图像比列表更靠前。

我想像这样得到它，但似乎无法弄清楚。 任何帮助将不胜感激!

代码:https://jsfiddle.net/z50zgpLg/

HTML:

<div class="container-fluid">
            <header>
                <ul class="nav">
                    <li>Home</li>
                    <li>Portfolio</li>
                    <li id="logo">
                        <img src="images/sonis.png"/>
                    </li>
                    </li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
            </header>
        </div>

CSS:

* {
                margin:0px;
                padding:0px;
            }
            .container-fluid {
                border: 1px solid red;
                width: 100%;
            }

            .nav {
                border: 1px solid black;
                width: 60%; 
                margin:0 auto;
                text-align: center;
            }

            .nav li {
                display: inline-block;
                border: 1px solid red;
            }

            #logo {
                height: auto;
                width: 100px;
            }

            #logo img {
                width: 100px;
                height: auto;
            }

Answer 1

你可以使用vertical-align:middle

CSS

 .nav li {
    display: inline-block;
    border: 1px solid red;
    vertical-align: middle;
 }

DEMO HERE