导航列表中的中心图像（垂直）

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

Answer 2

将vertical-align:middle添加到li CSS。内联块项的默认值为baseline，您必须更改它。

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

Answer 3

我在这里有一个工作小提琴，模仿你在寻找什么。 https://jsfiddle.net/41hgusjr/

我只是将padding-bottom: 5px;和padding-top:5px;添加到徽标和img。

当然，这使得导航系统变大了。