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

【问题标题】：Center image (vertically) in Navigation List导航列表中的中心图像（垂直）
【发布时间】：2016-02-03 23:05:03
【问题描述】：

我正在尝试创建一个响应式导航列表，并且图像在页面上的列表中居中

我已经设法接近了，但是图像比列表更高。

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

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;
            }

【问题讨论】：

标签： html css image navigation center

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你可以使用vertical-align:middle

CSS

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

DEMO HERE

【讨论】：

【解决方案3】：

我在这里有一个工作小提琴来模拟您正在寻找的东西。 https://jsfiddle.net/41hgusjr/

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

当然，这会使导航变大。

【讨论】：