在导航列表中居中图像（垂直）

Question

我正在尝试创建一个具有响应能力的导航列表，并使图像在页面的列表中居中

我已经接近那个了，但是图片比列表高。

我想这样理解，但似乎无法弄清楚。如有任何帮助，我们将不胜感激！

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 添加到 li CSS。内联块项的默认值是 baseline，您必须更改它。

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

Answer 2

您可以使用 vertical-align:middle

CSS

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

DEMO HERE

Answer 3

我这里有一个有效的 fiddle 可以模拟您正在寻找的内容。 https://jsfiddle.net/41hgusjr/

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

当然，这会使导航变得更大。

在导航列表中居中图像（垂直）

Center image (vertically) in Navigation List

html

css

navigation

image

center